访问子组件类

@ViewChild 和 @ViewChildren

@ViewChild 和 @ViewChildren 装饰器提供对包含组件的子组件类的访问。

@ViewChild 是一个装饰器函数，它将组件类的名称作为其输入，并在要绑定的包含组件的模板中找到其选择器。 @ViewChild也可以传递一个模板引用变量。

例如，我们将组件类Alert绑定到其选择器<my-alert>，并将其分配给属性alert。 这使我们能够访问类方法，如show()。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {Component, ViewChild} from '@angular/core';
import {Alert} from './alert.component';

@Component({
  selector: 'app',
  template: `
    <my-alert>My alert</my-alert>
    <button (click)="showAlert()">Show Alert</button>`
})
export class App {
  @ViewChild(Alert) alert: Alert;

  showAlert() {
    this.alert.show();
  }
}

View Example

为了分离关注点，我们通常希望子元素处理自己的行为并传递@Input()。 然而，它可能有助于保持结构通用。

当模板中有多个嵌入式组件时，我们还可以使用@ViewChildren。 它收集 Alert 组件的实例列表，存储在与数组类似的QueryList 对象中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component, QueryList, ViewChildren } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-root',
    template: `
    <app-alert ok="Next" (close)="showAlert(2)">
      Step 1: Learn angular
    </app-alert>
    <app-alert ok="Next" (close)="showAlert(3)">
      Step 2: Love angular
    </app-alert>
    <app-alert ok="Close">
      Step 3: Build app
    </app-alert>
      <button (click)="showAlert(1)">Show steps</button>`
})
export class AppComponent {
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>;
  alertsArr = [];

  ngAfterViewInit() {
    this.alertsArr = this.alerts.toArray();
  }

  showAlert(step) {
    this.alertsArr[step - 1].show(); // step 1 is alert index 0
  }
}

View Example

如上所示，给定类型为@ViewChild和@ViewChildren的子组件或子组件的列表分别使用它们的选择器从模板中选择。 另外@ViewChild和@ViewChildren都可以传递一个选择器字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Component({
    selector: 'app-root',
    template: `
    <app-alert #first ok="Next" (close)="showAlert(2)">
      Step 1: Learn angular
    </app-alert>
    <app-alert ok="Next" (close)="showAlert(3)">
      Step 2: Love angular
    </app-alert>
    <app-alert ok="Close">
      Step 3: Build app
    </app-alert>
      <button (click)="showAlert(1)">Show steps</button>`
})
export class AppComponent {
  @ViewChild('first') alert: AlertComponent;
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>;
  // ...
}

View Example

注意，在调用ngAfterViewInit生命周期钩子之前，view children 不会被设置。

@ContentChild 和 @ContentChildren

@ContentChild和@ContentChildren的工作方式与相应的@ViewChild和@ViewChildren相同，但是，主要区别是@ContentChild和@ContentChildren从组件中的projected content（投影内容）中选择。

再次注意，在ngAfterContentInit组件生命周期钩子之前不会设置 content children。

View Example