基于值显示组件 - Angular 2

我有不同的选项卡，显示带有组件的功能区。我需要做的是在项目未加载（未定义）时隐藏这些组件，并显示下拉列表中的任何项目何时加载。为此，我需要从项目ID或名称中获取值，然后可以显示其余的色带组件。基于值显示组件 - Angular 2

正如你所看到的，这是与部件标签之一：

<div class="tab tab-style"> 

<ribbon-item style="width:10%;" [title]="'Load/Save Project'"> 
    <project></project> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item style="width:12%;" [title]="'Project settings'"> 
    <project-settings></project-settings> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item style="width:23%;" [title]="'Environment'"> 
    <environment></environment> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item class="pd-width" [title]="'Project dates'"> 
    <project-dates></project-dates> 
</ribbon-item> 
<div class="ribbon-divider"></div>

这是从该选项卡项目组成部分已project.id：

<div class="button-wrapper"> 
<select #projectSelect class="custom-select custom-select-project" (change)="loadProject(projectSelect.value)"> 
    <option selected disabled>Open projects</option> 
    <option *ngFor="let project of projects" [value]=project.id>{{project.name}}</option> 
</select> 

<button class="btn-main" (click)="createNewProject()">New project</button> 
<button class="btn-main">Save project</button> 
<button class="btn-main">Save as</button>

基本问题是，我如何设置其余的组件（project.component除外）？ o根据id值或数据表单显示该组件？我可以使用ngIf或类似的东西吗？感谢您的帮助

来源

2017-09-15 Vladimir Tomasevic MyNameIsVLT

花费了一些时间为输入和输出（Angular使用的双向数据绑定），嵌套组件以及“transclusion”（包括一个另一个组件的内容区域内的组件）。

该plunk是here。

亮点是完全一样pezetter描述：在真实发光值的子组件，您需要使用EventEmitter和Output：

// SelectorComponent 
@Output() valueSelected: EventEmitter<number> = new EventEmitter(); 
selectValue(val: number) { 
    this.valueSelected.emit(val); 
}

这将在(change)事件您<select>组件的调用。

// SelectorComponent  
<select #selectorElem (change)="selectValue(selectorElem.value)">

然后父为发射事件手表

最后，你只需要你的组件将被隐藏或显示基于已输出的值（向上传递到这样做父母）。在普拉克，有2种不同的方式做到这一点：一个* ngIf组件本身（alt-child）上：成分（child）

// ParentComponent 
<child design="red" [value]="selectedVal" [position]="2"> 

// ChildComponent 
<div [ngClass]="design" *ngIf="value >= position">

内

// ParentComponent  
<alt-child design="gray" *ngIf="selectedVal">

或* ngIf这所有这些都必须比理解需要更深入，但希望有些人可以找到有用的东西。

来源

2017-09-15 17:02:51

谢谢，就是我一直在寻找:)这将解决我的问题肯定 –

很高兴帮助:) –

你不会介意帮助我这个私人聊天吗？我有一些特定的相关代码，我需要实现这一点，但我并没有设法使其工作。我可以给你发送文件并解释。我相信这对你很简单：D –

将@Output添加到项目组件。然后，发出一个包含您的项目值的事件，该事件将使用ngIf或类似的东西启用其他组件。

在你project.component.ts：

@Output() setProjectValue = new EventEmitter(); 

loadProject(val){ 
    let foundProject; 
    //Load project logic here... 
    foundProject == ...; // once its done: 
    this.setProjectValue.emit(foundProject); //This will output to your parent component. 
}

在你app.component.html（或任何家长要项目部分）：

<project (setProjectValue)="project = $event;"></project> //I think you're allowed to bind like this.

不过，我会建议刚使用服务/提供者来存储加载的项目。每次加载项目时设置该值，并使用该父组件中的条件来检查该服务是否具有加载的项目值。

来源

2017-09-15 15:55:15 Everett

您可以考虑为选项卡式用户界面使用路由而不是嵌套组件。

产生的HTML代码则是这个样子：

<div class="panel-body"> 
    <div class="wizard"> 
     <a [routerLink]="['info']" routerLinkActive="active"> 
      Basic Information <span [ngClass]="{'glyphicon glyphicon-exclamation-sign': 
                !isValid('info')}"></span> 
     </a> 
     <a [routerLink]="['tags']" routerLinkActive="active"> 
      Search Tags <span [ngClass]="{'glyphicon glyphicon-exclamation-sign': 
                !isValid('tags')}"></span> 
     </a> 
    </div> 

    <router-outlet></router-outlet> 
</div>

基本上有标签和路由器的出口。

然后，您可以使用路由参数轻松地将数据传递到不同的路由。

我在这里有一个完整的例子：https://github.com/DeborahK/Angular-Routing在APM-Final文件夹中。

来源

2017-09-15 16:51:20 DeborahK

基于值显示组件 - Angular 2

回答

相关问题