访问子组件类

@ViewChild 和 @ViewChildren

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

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

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

  1. import {Component, ViewChild} from '@angular/core';
  2. import {Alert} from './alert.component';
  3. @Component({
  4. selector: 'app',
  5. template: `
  6. <my-alert>My alert</my-alert>
  7. <button (click)="showAlert()">Show Alert</button>`
  8. })
  9. export class App {
  10. @ViewChild(Alert) alert: Alert;
  11. showAlert() {
  12. this.alert.show();
  13. }
  14. }

View Example

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

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

  1. import { Component, QueryList, ViewChildren } from '@angular/core';
  2. import { AlertComponent } from './alert.component';
  3. @Component({
  4. selector: 'app-root',
  5. template: `
  6. <app-alert ok="Next" (close)="showAlert(2)">
  7. Step 1: Learn angular
  8. </app-alert>
  9. <app-alert ok="Next" (close)="showAlert(3)">
  10. Step 2: Love angular
  11. </app-alert>
  12. <app-alert ok="Close">
  13. Step 3: Build app
  14. </app-alert>
  15. <button (click)="showAlert(1)">Show steps</button>`
  16. })
  17. export class AppComponent {
  18. @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>;
  19. alertsArr = [];
  20. ngAfterViewInit() {
  21. this.alertsArr = this.alerts.toArray();
  22. }
  23. showAlert(step) {
  24. this.alertsArr[step - 1].show(); // step 1 is alert index 0
  25. }
  26. }

View Example

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

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

View Example

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

@ContentChild 和 @ContentChildren

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

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

View Example