値に基づいてコンポーネントを表示する - 角度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> 

基本的な質問は、残りのコンポーネントを設定するにはどうすればいいですか（project.componentを除く） o id値またはデータフォームに基づいて、そのコンポーネントを表示しますか？ ngIfなどを使用することはできますか？ヘルプありがとう

Answer 1

入力と出力（Angularが採用している双方向データバインディング）、ネストされたコンポーネント、および「トランジション」を含む非常に基本的なパンクをまとめています。他のコンポーネントのコンテンツ領域内のコンポーネント）。

その塊はhereです。

ハイライトはまったく同じpezetter説明されています値を発するの子コンポーネントでは、あなたが使用したいと思うEventEmitterとOutput：あなた<select>コンポーネントの(change)イベントで呼び出されます

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

。

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

親はその後、

​​

最後に、あなただけ（に渡さ隠したり出力された値に基づいて、そうすることを示すされるあなたの部品を必要とする放射されたイベントを監視親）。 * 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これはplunkでは、これが行われる2つの異なる方法があります確かに理解するために必要なものよりもはるかに深いものですが、うまくいけば、そのプラークで遊んでいる人もいます。

Answer 2

@Outputをプロジェクトコンポーネントに追加します。次に、ngIfなどで他のコンポーネントを有効にするプロジェクト値を含むイベントを発行します。あなたのproject.component.tsで

：

あなたapp.component.htmlで

@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. 
} 

（または任意の親がコンポーネントを投影することである）：

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

しかし、私はちょうど推薦しますロードされたプロジェクトを格納するサービス/プロバイダを使用します。プロジェクトがロードされるたびにその値を設定し、サービスがロードされたプロジェクト値を持つかどうかをチェックする条件をその親コン​​ポーネントで使用します。

Answer 3

タブ付きユーザーインターフェイスにネストされたコンポーネントの代わりにルーティングを使用することを検討できます。

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> 

は基本的にタブやルータのコンセントがあります。

次に、ルートパラメータを使用してさまざまなルートにデータを簡単に渡すことができます。

この例の完全な例は、APM-Finalフォルダのhttps://github.com/DeborahK/Angular-Routingです。