根据值显示组件 - Angular 2

Question

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

如您所见，这是包含组件的选项卡之一：

<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>

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

Answer 1

向项目组件添加@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.

但是，我建议只使用 service/provider 来存储加载的项目。每次加载项目时设置该值，并在该父组件中使用一个条件来检查服务是否具有已加载的项目值。

Answer 2

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

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 文件夹中。

Answer 3

花了一些时间将输入和输出（Angular 采用的双向数据绑定）、嵌套组件以及 "transclusion" 的想法放在一起（您将一个组件包含在另一个组件的内容区域内）。

那个笨蛋是 here。

亮点与 pezetter 描述的完全一样：在发出值的子组件中，您需要使用 EventEmitter 和 Output:

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

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

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

父级然后监视发出的事件

// ParentComponent (template)
<selector design="purple" (valueSelected)="valueChanges($event)"></selector>

// ParentComponent
selectedVal: string;    
valueChanges(val: number) {
    this.selectedVal = val;
}

最后，您只需要根据输出的值（传递给父级）隐藏或显示的组件即可。在 plunk 中，有两种不同的方法可以做到这一点：组件本身的 *ngIf (alt-child):

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

或组件中的 *ngIf (child)

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

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

这一切肯定比理解所需的更深入，但希望有些人会发现玩弄这些东西很有用。

根据值显示组件 - Angular 2

Show component based on value - Angular 2

components

show-hide

angular