本烹饪宝典包含了常见的组件通讯场景，也就是让两个或多个组件之间共享信息的方法。

要深入了解组件通讯的各个基本概念，在组件通讯文档中可以找到详细的描述和例子。

使用输入绑定把数据从父组件传给子组件
Pass data from parent to child with input binding
使用赋值器（setter）拦截输入属性的变化
Intercept input property changes with a setter
使用ngOnChanges()拦截输入属性的变化
Intercept input property changes with ngOnChanges()
在父组件中调用@ViewChild()
Parent calls an @ViewChild()
通过服务进行父子通讯
Parent and children communicate via a service

参见live example / downloadable example。

通过输入型绑定把数据从父组件传到子组件。

HeroChildComponent 有两个输入型属性，它们通常带@Input装饰器。

HeroChildComponent has two input properties, typically adorned with @Input decorations.

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;
}

第二个@Input为子组件的属性名masterName指定一个别名master(译者注：不推荐为起别名，请参见风格指南).

The second @Input aliases the child component property name masterName as 'master'.

父组件HeroParentComponent把子组件的HeroChildComponent放到*ngFor循环器中，把自己的master字符串属性绑定到子组件的master别名上，并把每个循环的hero实例绑定到子组件的hero属性。

The HeroParentComponent nests the child HeroChildComponent inside an *ngFor repeater, binding its master string property to the child's master alias, and each iteration's hero instance to the child's hero property.

import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
  selector: 'hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master: string = 'Master';
}

运行应用程序会显示三个英雄：

测试

端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。

// ...
let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto'];
let _masterName = 'Master';
it('should pass properties to children properly', function () {
  let parent = element.all(by.tagName('hero-parent')).get(0);
  let heroes = parent.all(by.tagName('hero-child'));
  for (let i = 0; i < _heroNames.length; i++) {
    let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
    let childDetail = heroes.get(i).element(by.tagName('p')).getText();
    expect(childTitle).toEqual(_heroNames[i] + ' says:');
    expect(childDetail).toContain(_masterName);
  }
});
// ...

回到顶部

通过setter截听输入属性值的变化

使用一个输入属性的setter，以拦截父组件中值的变化，并采取行动。

子组件NameChildComponent的输入属性name上的这个setter，会trim掉名字里的空格，并把空值替换成默认字符串。

The setter of the name input property in the child NameChildComponent trims the whitespace from a name and replaces an empty value with default text.

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展示了各种名字的处理方式，包括一个全是空格的名字。

Here's the NameParentComponent demonstrating name variations including a name with all spaces:

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  '];
}

测试

端到端测试：输入属性的setter，分别使用空名字和非空名字。

// ...
it('should display trimmed, non-empty names', function () {
  let _nonEmptyNameIndex = 0;
  let _nonEmptyName = '"Mr. IQ"';
  let parent = element.all(by.tagName('name-parent')).get(0);
  let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
  let displayName = hero.element(by.tagName('h3')).getText();
  expect(displayName).toEqual(_nonEmptyName);
});
it('should replace empty name with default name', function () {
  let _emptyNameIndex = 1;
  let _defaultName = '"<no name set>"';
  let parent = element.all(by.tagName('name-parent')).get(0);
  let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
  let displayName = hero.element(by.tagName('h3')).getText();
  expect(displayName).toEqual(_defaultName);
});
// ...

回到顶部

通过ngOnChanges()来截听输入属性值的变化

使用OnChanges生命周期钩子接口的ngOnChanges()方法来监测输入属性值的变化并做出回应。

Detect and act upon changes to input property values with the ngOnChanges() method of the OnChanges lifecycle hook interface.

当需要监视多个、交互式输入属性的时候，本方法比用属性的setter更合适。

学习关于ngOnChanges()的更多知识，参见生命周期钩子一章。

Learn about ngOnChanges() in the LifeCycle Hooks chapter.

这个VersionChildComponent会监测输入属性major和minor的变化，并把这些变化编写成日志以报告这些变化。

This VersionChildComponent detects changes to the major and minor input properties and composes a log message reporting these changes:

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
@Component({
  selector: 'version-child',
  template: `
    <h3>Version {{major}}.{{minor}}</h3>
    <h4>Change log:</h4>
    <ul>
      <li *ngFor="let change of changeLog">{{change}}</li>
    </ul>
  `
})
export class VersionChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;
  changeLog: string[] = [];
  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
    let log: string[] = [];
    for (let propName in changes) {
      let changedProp = changes[propName];
      let to = JSON.stringify(changedProp.currentValue);
      if (changedProp.isFirstChange()) {
        log.push(`Initial value of ${propName} set to ${to}`);
      } else {
        let from = JSON.stringify(changedProp.previousValue);
        log.push(`${propName} changed from ${from} to ${to}`);
      }
    }
    this.changeLog.push(log.join(', '));
  }
}

VersionParentComponent提供minor和major值，把修改它们值的方法绑定到按钮上。

The VersionParentComponent supplies the minor and major values and binds buttons to methods that change them.

import { Component } from '@angular/core';
@Component({
  selector: 'version-parent',
  template: `
    <h2>Source code version</h2>
    <button (click)="newMinor()">New minor version</button>
    <button (click)="newMajor()">New major version</button>
    <version-child [major]="major" [minor]="minor"></version-child>
  `
})
export class VersionParentComponent {
  major: number = 1;
  minor: number = 23;
  newMinor() {
    this.minor++;
  }
  newMajor() {
    this.major++;
    this.minor = 0;
  }
}

下面是点击按钮的结果。

测试

测试确保这两个输入属性值都被初始化了，当点击按钮后，ngOnChanges应该被调用，属性的值也符合预期。

Test that both input properties are set initially and that button clicks trigger the expected ngOnChanges calls and values:

// ...
// Test must all execute in this exact order
it('should set expected initial values', function () {
  let actual = getActual();
  let initialLabel = 'Version 1.23';
  let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
  expect(actual.label).toBe(initialLabel);
  expect(actual.count).toBe(1);
  expect(actual.logs.get(0).getText()).toBe(initialLog);
});
it('should set expected values after clicking \'Minor\' twice', function () {
  let repoTag = element(by.tagName('version-parent'));
  let newMinorButton = repoTag.all(by.tagName('button')).get(0);
  newMinorButton.click().then(function() {
    newMinorButton.click().then(function() {
      let actual = getActual();
      let labelAfter2Minor = 'Version 1.25';
      let logAfter2Minor = 'minor changed from 24 to 25';
      expect(actual.label).toBe(labelAfter2Minor);
      expect(actual.count).toBe(3);
      expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
    });
  });
});
it('should set expected values after clicking \'Major\' once', function () {
  let repoTag = element(by.tagName('version-parent'));
  let newMajorButton = repoTag.all(by.tagName('button')).get(1);
  newMajorButton.click().then(function() {
    let actual = getActual();
    let labelAfterMajor = 'Version 2.0';
    let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
    expect(actual.label).toBe(labelAfterMajor);
    expect(actual.count).toBe(4);
    expect(actual.logs.get(3).getText()).toBe(logAfterMajor);
  });
});
function getActual() {
  let versionTag = element(by.tagName('version-child'));
  let label = versionTag.element(by.tagName('h3')).getText();
  let ul = versionTag.element((by.tagName('ul')));
  let logs = ul.all(by.tagName('li'));
  return {
    label: label,
    logs: logs,
    count: logs.count()
  };
}
// ...

回到顶部

父组件监听子组件的事件

子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

The child component exposes an EventEmitter property with which it emitsevents when something happens. The parent binds to that event property and reacts to those events.

子组件的EventEmitter属性是一个输出属性，通常带有@Output装饰器，就像在VoterComponent中看到的。

The child's EventEmitter property is an output property, typically adorned with an @Output decoration as seen in this 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(布尔型有效载荷)的事件。

Clicking a button triggers emission of a true or false ,the boolean payload.

父组件VoteTakerComponent绑定了一个事件处理器(onVoted())，用来响应子组件的事件($event)并更新一个计数器。

The parent VoteTakerComponent binds an event handler calledonVoted() that responds to the child event payload $event and updates a counter.

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++;
  }
}

框架(Angular)把事件参数(用$event表示)传给事件处理方法，这个方法会处理：

The framework passes the event argument — represented by $event — to the handler method, and the method processes it:

测试

测试确保点击Agree和Disagree按钮时，计数器被正确更新。

// ...
it('should not emit the event initially', function () {
  let voteLabel = element(by.tagName('vote-taker'))
    .element(by.tagName('h3')).getText();
  expect(voteLabel).toBe('Agree: 0, Disagree: 0');
});
it('should process Agree vote', function () {
  let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
    .all(by.tagName('button')).get(0);
  agreeButton1.click().then(function() {
    let voteLabel = element(by.tagName('vote-taker'))
      .element(by.tagName('h3')).getText();
    expect(voteLabel).toBe('Agree: 1, Disagree: 0');
  });
});
it('should process Disagree vote', function () {
  let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
    .all(by.tagName('button')).get(1);
  agreeButton1.click().then(function() {
    let voteLabel = element(by.tagName('vote-taker'))
      .element(by.tagName('h3')).getText();
    expect(voteLabel).toBe('Agree: 1, Disagree: 1');
  });
});
// ...

回到顶部

父组件与子组件通过本地变量互动

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。

子组件CountdownTimerComponent进行倒计时，归零时发射一个导弹。start和stop方法负责控制时钟并在模板里显示倒计时的状态信息。

The following is a child CountdownTimerComponent that repeatedly counts down to zero and launches a rocket. It has start and stop methods that control the clock and it displays a countdown status message in its own template.

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。

The CountdownLocalVarParentComponent that hosts the timer componentis as follows:

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属性。

The parent component cannot data bind to the child's start and stop methods nor to its seconds property.

把本地变量(#timer)放到(<countdown-timer>)标签中，用来代表子组件。这样父组件的模板就得到了子组件的引用，于是可以在父组件的模板中访问子组件的所有属性和方法。

You can place a local variable, #timer, on the tag <countdown-timer> representing the child component. That gives you a reference to the child component and the ability to access any of its properties or methods from within the parent template.

在这个例子中，我们把父组件的按钮绑定到子组件的start和stop方法，并用插值表达式来显示子组件的seconds属性。

This example wires parent buttons to the child's start and stop and uses interpolation to display the child's seconds property.

下面是父组件和子组件一起工作时的效果。

测试

测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击Stop按钮来停止倒计时：

// ...
it('timer and parent seconds should match', function () {
  let parent = element(by.tagName(parentTag));
  let message = parent.element(by.tagName('countdown-timer')).getText();
  browser.sleep(10); // give `seconds` a chance to catchup with `message`
  let seconds = parent.element(by.className('seconds')).getText();
  expect(message).toContain(seconds);
});
it('should stop the countdown', function () {
  let parent = element(by.tagName(parentTag));
  let stopButton = parent.all(by.tagName('button')).get(1);
  stopButton.click().then(function() {
    let message = parent.element(by.tagName('countdown-timer')).getText();
    expect(message).toContain('Holding');
  });
});
// ...

回到顶部

父组件调用@ViewChild()

这个本地变量方法是个简单便利的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。

当父组件类需要这种访问时，可以把子组件作为ViewChild，注入到父组件里面。

下面的例子用与倒计时相同的范例来解释这种技术。我们没有改变它的外观或行为。子组件CountdownTimerComponent也和原来一样。

由本地变量切换到ViewChild技术的唯一目的就是做示范。

下面是父组件CountdownViewChildParentComponent:

Here is the parent, 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生命周期钩子。

First, you have to import references to the ViewChild decorator and the AfterViewInit lifecycle hook.

接着，通过@ViewChild属性装饰器，将子组件CountdownTimerComponent注入到私有属性timerComponent里面。

Next, inject the child CountdownTimerComponent into the private timerComponent property via the @ViewChild property decoration.

组件元数据里就不再需要#timer本地变量了。而是把按钮绑定到父组件自己的start和stop方法，使用父组件的seconds方法的插值表达式来展示秒数变化。

The #timer local variable is gone from the component metadata. Instead , bind the buttons to the parent component's own start and stop methods and present the ticking seconds in an interpolation around the parent component's seconds method.

这些方法可以直接访问被注入的计时器组件。

ngAfterViewInit()生命周期钩子是非常重要的一步。被注入的计时器组件只有在Angular显示了父组件视图之后才能访问，所以我们先把秒数显示为0.

The ngAfterViewInit() lifecycle hook is an important wrinkle. The timer component isn't available until after Angular displays the parent view. So it displays 0 seconds initially.

然后Angular会调用ngAfterViewInit生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular的单向数据流规则会阻止在同一个周期内更新父组件视图。我们在显示秒数之前会被迫再等一轮。

Then Angular calls the ngAfterViewInit lifecycle hook at which time it is too late to update the parent view's display of the countdown seconds. Angular's unidirectional data flow rule prevents updating the parent view's in the same cycle. The app has to wait one turn before it can display the seconds.

使用setTimeout()来等下一轮，然后改写seconds()方法，这样它接下来就会从注入的这个计时器组件里获取秒数的值。

Use setTimeout() to wait one tick and then revise the seconds() method so that it takes future values from the timer component.

测试

使用和之前一样的倒计时测试。

回到顶部

父组件和子组件通过服务来通讯

父组件和它的子组件共享同一个服务，利用该服务在家庭内部实现双向通讯。

该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。

这个MissionService把MissionControlComponent和多个AstronautComponent子组件连接起来。

This MissionService connects the MissionControlComponent to multiple AstronautComponent children.

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提供服务的实例，并将其共享给它的子组件(通过providers元数据数组)，子组件可以通过构造函数将该实例注入到自身。

The MissionControlComponent both provides the instance of the service that it shares with its children (through the providers metadata array) and injects that instance into itself through its constructor:

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的子组件，所以它们获取到的也是父组件的这个服务实例。

The AstronautComponent also injects the service in its constructor. Each AstronautComponent is a child of the MissionControlComponent and therefore receives its parent's service instance:

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();
  }
}

注意，这个例子保存了subscription变量，并在AstronautComponent被销毁时调用unsubscribe()退订。这是一个用于防止内存泄漏的保护措施。实际上，在这个应用程序中并没有这个风险，因为AstronautComponent的生命期和应用程序的生命期一样长。但在更复杂的应用程序环境中就不一定了。

Notice that this example captures the subscription and unsubscribe() when the AstronautComponent is destroyed. This is a memory-leak guard step. There is no actual risk in this app because the lifetime of a AstronautComponent is the same as the lifetime of the app itself. That would not always be true in a more complex application.

不需要在MissionControlComponent中添加这个保护措施，因为它作为父组件，控制着MissionService的生命期。

You don't add this guard to the MissionControlComponent because, as the parent, it controls the lifetime of the MissionService.

History日志证明了：在父组件MissionControlComponent和子组件AstronautComponent之间，信息通过该服务实现了双向传递。

The History log demonstrates that messages travel in both directions between the parent MissionControlComponent and the AstronautComponent children, facilitated by the service:

测试

测试确保点击父组件MissionControlComponent和子组件AstronautComponent两个的组件的按钮时，History日志和预期的一样。

Tests click buttons of both the parent MissionControlComponent and the AstronautComponent children and verify that the history meets expectations:

// ...
it('should announce a mission', function () {
  let missionControl = element(by.tagName('mission-control'));
  let announceButton = missionControl.all(by.tagName('button')).get(0);
  announceButton.click().then(function () {
    let history = missionControl.all(by.tagName('li'));
    expect(history.count()).toBe(1);
    expect(history.get(0).getText()).toMatch(/Mission.* announced/);
  });
});
it('should confirm the mission by Lovell', function () {
  testConfirmMission(1, 2, 'Lovell');
});
it('should confirm the mission by Haise', function () {
  testConfirmMission(3, 3, 'Haise');
});
it('should confirm the mission by Swigert', function () {
  testConfirmMission(2, 4, 'Swigert');
});
function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
  let _confirmedLog = ' confirmed the mission';
  let missionControl = element(by.tagName('mission-control'));
  let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
  confirmButton.click().then(function () {
    let history = missionControl.all(by.tagName('li'));
    expect(history.count()).toBe(expectedLogCount);
    expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
  });
}
// ...

回到顶部

组件通讯

目录

Contents

通过输入型绑定把数据从父组件传到子组件。

Pass data from parent to child with input binding

测试

Test it

通过setter截听输入属性值的变化

Intercept input property changes with a setter

测试

Test it

通过ngOnChanges()来截听输入属性值的变化

Intercept input property changes with ngOnChanges()

测试

Test it

父组件监听子组件的事件

Parent listens for child event

测试

Test it

父组件与子组件通过本地变量互动

Parent interacts with child via local variable

测试

Test it

父组件调用@ViewChild()

Parent calls an @ViewChild()

测试

Test it

父组件和子组件通过服务来通讯

Parent and children communicate via a service

测试

Test it