Question

我有4个组件可以上课＃34;加载＆＃34;，当他们准备好了，但我不太清楚如何以一种很好的方式处理这个问题

组件不在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;
}

}

SD

Answer 1

您可以将具有数字的对象用于布尔值。

loaded = {}

Answer 2

您可以为这四个组件创建一个组件，您可以在其中添加一个名为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 } }的生命周期钩子。你可以阅读这个there。然后在此组件中，您可以创建如下所示的输出事件发射器：

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

您的paren组件的模板仍然可以在您的示例中看起来像添加事件处理程序：

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

然后在您的父组件中，您需要添加用于处理此事件的函数

myarray[n]

关于输出和处理，您可以阅读更多there

Angular 2加载类

2 个答案: