我有不同的选项卡,显示带有组件的功能区。我需要做的是让这些组件在项目未加载(未定义)时隐藏,并在加载下拉列表中的任何项目时显示。为此,我需要从项目 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 或类似的东西吗?感谢您的帮助
最佳答案
花了一些时间将输入和输出(Angular 使用的双向数据绑定(bind))的想法与嵌套组件以及“嵌入”(其中包含一个组件)放在一起,形成一个非常基本的组合在另一个组件的内容区域内)。
那个笨蛋是 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)">
然后父进程会监视发出的事件
// 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 - 根据值显示组件 - Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46242568/