使用输入绑定将数据从父级传递给子级
HeroChildComponent 有两个输入属性，通常用 @Input 装饰。
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
使用 setter 拦截输入属性更改
使用输入属性 setter 拦截并处理来自父级的值。
子 NameChildComponent 中的 name 输入属性的 setter 从名称中修剪空白，并用默认文本替换空值。
import { Component, Input } from '@angular/core';
@Component({
selector: 'name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name(): string { return this._name; }
}
这是 NameParentComponent 演示名称变体，包括具有所有空格的名称：
import { Component } from '@angular/core';
@Component({
selector: 'name-parent',
template: `
<h2>Master controls {{names.length}} names</h2>
<name-child *ngFor="let name of names" [name]="name"></name-child>
`
})
export class NameParentComponent {
// Displays 'Mr. IQ', '<no name set>', 'Bombasto'
names = ['Mr. IQ', ' ', ' Bombasto '];
}
父听取儿童事件
子组件公开 EventEmitter 属性，当事情发生时，它会使用该属性发出事件。父级绑定到该事件属性并对这些事件做出反应。
子项的 EventEmitter 属性是一个输出属性，通常使用 @Output 装饰进行装饰，如此 VoterComponent 中所示：
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'my-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="voted">Agree</button>
<button (click)="vote(false)" [disabled]="voted">Disagree</button>
`
})
export class VoterComponent {
@Input() name: string;
@Output() onVoted = new EventEmitter<boolean>();
voted = false;
vote(agreed: boolean) {
this.onVoted.emit(agreed);
this.voted = true;
}
}
单击按钮会触发 true 或 false（布尔有效负载）的发射。
父 VoteTakerComponent 绑定一个事件处理程序（onVoted），它响应子事件有效负载（$ event）并更新计数器。
import { Component } from '@angular/core';
@Component({
selector: 'vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<my-voter *ngFor="let voter of voters"
[name]="voter"
(onVoted)="onVoted($event)">
</my-voter>
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}
父通过局部变量与子进行交互
父组件不能使用数据绑定来读取子属性或调用子方法。我们可以通过为子元素创建模板引用变量，然后在父模板中引用该变量来实现这两者，如以下示例所示。
我们有一个子 CountdownTimerComponent，它反复计数到零并启动一个火箭。它具有控制时钟的启动和停止方法，并在其自己的模板中显示倒计时状态消息。
import { Component, OnDestroy, OnInit } from '@angular/core';
@Component({
selector: 'countdown-timer',
template: '<p>{{message}}</p>'
})
export class CountdownTimerComponent implements OnInit, OnDestroy {
intervalId = 0;
message = '';
seconds = 11;
clearTimer() { clearInterval(this.intervalId); }
ngOnInit() { this.start(); }
ngOnDestroy() { this.clearTimer(); }
start() { this.countDown(); }
stop() {
this.clearTimer();
this.message = `Holding at T-${this.seconds} seconds`;
}
private countDown() {
this.clearTimer();
this.intervalId = window.setInterval(() => {
this.seconds -= 1;
if (this.seconds === 0) {
this.message = 'Blast off!';
} else {
if (this.seconds < 0) { this.seconds = 10; } // reset
this.message = `T-${this.seconds} seconds and counting`;
}
}, 1000);
}
}
让我们看一下承载计时器组件的 CountdownLocalVarParentComponent。
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'countdown-parent-lv',
template: `
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>
`,
styleUrls: ['demo.css']
})
export class CountdownLocalVarParentComponent { }
父组件无法将数据绑定到子进程的 start 和 stop 方法，也无法绑定到其 seconds 属性。
我们可以在表示子组件的 tag() 上放置一个局部变量（#timer）。这为我们提供了对子组件本身的引用，以及从父模板中访问其任何属性或方法的能力。
在此示例中，我们将父按钮连接到子项的开始和停止，并使用插值显示子项的秒属性。
在这里，我们看到父母和孩子一起工作。
Parent 调用 ViewChild
局部变量方法简单易行。但它是有限的，因为父子线路必须完全在父模板内完成。父组件本身无权访问子项。
如果父组件类的实例必须读取或写入子组件值或必须调用子组件方法，则不能使用局部变量技术。
当父组件类需要这种访问时，我们将子组件作为 ViewChild 注入父组件。
我们将使用相同的倒数计时器示例来说明此技术。我们不会改变它的外观或行为。子 CountdownTimerComponent 也是一样的。
我们只是为了演示而从局部变量切换到 ViewChild 技术。这是父，CountdownViewChildParentComponent：
import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<countdown-timer></countdown-timer>
`,
styleUrls: ['demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {
@ViewChild(CountdownTimerComponent)
private timerComponent: CountdownTimerComponent;
seconds() { return 0; }
ngAfterViewInit() {
// Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
// but wait a tick first to avoid one-time devMode
// unidirectional-data-flow-violation error
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
}
start() { this.timerComponent.start(); }
stop() { this.timerComponent.stop(); }
}
将子视图放入父组件类需要更多的工作。
我们导入对 ViewChild 装饰器和 AfterViewInit 生命周期钩子的引用。
我们通过 @ViewChild 属性修饰将子 CountdownTimerComponent 注入私有 timerComponent 属性。
#timer 局部变量已从组件元数据中消失。相反，我们将按钮绑定到父组件自己的 start 和 stop 方法，并在父组件的 seconds 方法周围插值时显示滴答秒。
这些方法直接访问注入的计时器组件。
ngAfterViewInit 生命周期钩子是一个重要的皱纹。在 Angular 显示父视图之后，计时器组件才可用。所以我们最初显示 0 秒。
然后 Angular 调用 ngAfterViewInit 生命周期钩子，此时更新父视图的倒计时秒显示为时已晚。Angular 的单向数据流规则阻止我们在同一周期中更新父视图。在我们显示秒数之前，我们必须等待一转。
我们使用 setTimeout 等待一个 tick，然后修改 seconds 方法，以便从计时器组件中获取未来的值。
家长和孩子通过服务进行交流
父组件及其子组件共享服务，其接口支持在系列内进行双向通信。
服务实例的范围是父组件及其子组件。此组件子树外部的组件无法访问服务或其通信。
此 MissionService 将 MissionControlComponent 连接到多个 AstronautComponent 子级。
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MissionService {
// Observable string sources
private missionAnnouncedSource = new Subject<string>();
private missionConfirmedSource = new Subject<string>();
// Observable string streams
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
// Service message commands
announceMission(mission: string) {
this.missionAnnouncedSource.next(mission);
}
confirmMission(astronaut: string) {
this.missionConfirmedSource.next(astronaut);
}
}
MissionControlComponent 既提供与其子代共享的服务实例（通过提供程序元数据数组），也通过其构造函数将该实例注入其自身：
import { Component } from '@angular/core';
import { MissionService } from './mission.service';
@Component({
selector: 'mission-control',
template: `
<h2>Mission Control</h2>
<button (click)="announce()">Announce mission</button>
<my-astronaut *ngFor="let astronaut of astronauts"
[astronaut]="astronaut">
</my-astronaut>
<h3>History</h3>
<ul>
<li *ngFor="let event of history">{{event}}</li>
</ul>
`,
providers: [MissionService]
})
export class MissionControlComponent {
astronauts = ['Lovell', 'Swigert', 'Haise'];
history: string[] = [];
missions = ['Fly to the moon!',
'Fly to mars!',
'Fly to Vegas!'];
nextMission = 0;
constructor(private missionService: MissionService) {
missionService.missionConfirmed$.subscribe(
astronaut => {
this.history.push(`${astronaut} confirmed the mission`);
});
}
announce() {
let mission = this.missions[this.nextMission++];
this.missionService.announceMission(mission);
this.history.push(`Mission "${mission}" announced`);
if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
}
}
AstronautComponent 也在其构造函数中注入服务。每个 AstronautComponent 都是 MissionControlComponent 的子节点，因此接收其父节点的服务实例：
import { Component, Input, OnDestroy } from '@angular/core';
import { MissionService } from './mission.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-astronaut',
template: `
<p>
{{astronaut}}: <strong>{{mission}}</strong>
<button
(click)="confirm()"
[disabled]="!announced || confirmed">
Confirm
</button>
</p>
`
})
export class AstronautComponent implements OnDestroy {
@Input() astronaut: string;
mission = '<no mission announced>';
confirmed = false;
announced = false;
subscription: Subscription;
constructor(private missionService: MissionService) {
this.subscription = missionService.missionAnnounced$.subscribe(
mission => {
this.mission = mission;
this.announced = true;
this.confirmed = false;
});
}
confirm() {
this.confirmed = true;
this.missionService.confirmMission(this.astronaut);
}
ngOnDestroy() {
// prevent memory leak when component destroyed
this.subscription.unsubscribe();
}
}
请注意，我们捕获订阅并在 AstronautComponent 销毁时取消订阅。这是一个内存泄漏保护步骤。此应用程序中没有实际风险，因为 AstronautComponent 的生命周期与应用程序本身的生命周期相同。在更复杂的应用程序中，这并非总是如此。
我们不会将此保护添加到 MissionControlComponent，因为作为父级，它控制 MissionService 的生命周期。历史记录日志显示消息在父 MissionControlComponent 和 AstronautComponent 子节点之间双向传播，由服务促进：