角度2ロードされたクラス

Question

compoenentsはしていない

を、彼らは準備ができているとき、私は、クラスを取得する必要があります4つの成分「ロード」を持っていますが、私はかなり良い方法でこれを処理する方法がわかりませんngForなので、インデックスはありません。

<div class="component" [ngClass]="{'loaded': loaded1}">1 </div> 
<div class="component" [ngClass]="{'loaded': loaded2}">2 </div> 
<div class="component" [ngClass]="{'loaded': loaded3}">3 </div> 
<div class="component" [ngClass]="{'loaded': loaded4}">4 </div> 

..私は4つの性質を持っている私のクラスで

。しかし、これは実際にそれを行う良い方法ですか、それとも良い/簡単です。私は個別に

export class test { 
    public loaded1 = false; 
    public loaded2 = false; 
    public loaded3 = false; 
    public loaded4 = false; 

methodForComponent1() { 
    this.loaded1 = true; 
} 
methodForComponent2() { 
    this.loaded2 = true; 
} 
methodForComponent3() { 
    this.loaded3 = true; 
} 
methodForComponent4() { 
    this.loaded4 = true; 
} 

} 

あなたはブールの番号を持つオブジェクトを使用することができます

Answer 1

をSDコンポーネントだけに影響を与えること、1つのloadedプロパティを持っていることを好むだろう。

ロード

= {}

Answer 2

あなたはngAfterViewInit()と呼ばれるあなたがライフサイクルのフックの1つを追加し、この四つの成分、のためのコンポーネントを作成することができます。これについてはthereを読むことができます。その後、

<your-component (componentLoaded)="yourFunctionInParentComponent($event)"></your-component>// you can add so many component so you need 

と：あなたの括弧コンポーネントのテンプレートはまだあなたのサンプル中のように見えるが、イベントハンドラを追加することができます

import { Component, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'your-compoent', 
    template: '<div [ngClass]="{'loaded': loaded}>Your template</div>' 
}) 
export class YourComponent { 
    private loaded:boolean = false; // this for your class 
    @Output() componentLoaded = new EventEmitter(); 

    ngAfterViewInit() { 
    this.loaded = true; 
    this.componentLoaded.emit(this.user); //there you emmit your paren component about that your component loaded 
    } 
} 

：その後、このコンポーネントでは、あなたはこのような何かエミッタ出力イベントを作成することができますあなたの親コンポーネントでは、あなたは出力について、このイベント

yourFunctionInParentComponent(event){ 
//there you can do what you need 
} 

を処理するための機能を追加する必要があり、それはあなたがより多くを読むことができる取り扱いthere