ngドロップダウン値に基づく表示 - 角度2

Question

私は、1対の異なるコンポーネントを含む1つの親コンポーネントを持っています。 "プロジェクト"コンポーネント（子）で、利用可能なプロジェクトを選択できるドロップダウンがあります。

プロジェクトがドロップダウンから選択されている場合、ngIfで作成する他のコンポーネントが必要です。

ここからわかるように、影響を受けたいコンポーネントの親コンポーネントにngIfを配置しました。

<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'" *ngIf="showComponent"> 
    <project-settings></project-settings> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

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

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

そして、これはドロップダウンで、 "プロジェクト" コンポーネントです。

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

どのように私は、ユーザーが任意のプロジェクトを選ぶ際に確認し、親内の他のコンポーネントを表示することができます。

Answer 1

プロジェクトコンポーネントの出力を使用できます。 フローは以下のように定義されます：

ステップ-1。プロジェクトのコンポーネントの親コンポーネントの変更：

`<project (projectSelected) = "projectSelected($event)"></Project>` 

ステップ-2：プロジェクトの構成要素では、出力変数を定義したとして：

@Output() projectSelected: EventEmitter<number> = new EventEmitter<number>(); 

ステップ-3：loadProjectで線の下に追加します。

this.projectSelected.emit(id); // selected value from dropdown 

ステップ4：親コンポーネントで定義された関数として：

projectSelected(projectId) { 
this.showComponent = true; 
}