Angular 其他组件交互方式

访问子组件类

@ViewChild 和 @ViewChildren

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

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

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

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 对象中。

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都可以传递一个选择器字符串:

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

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