angular2 学习笔记3

组件交互：

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

子组件

1. export class HeroChildComponent {
2. @Input() hero: Hero;
3. @Input('master') masterName: string;
4. }

父组件

1. import { Component } from '@angular/core';
2.  
3. import { HEROES } from './hero';
4.  
5. @Component({
6. selector: 'hero-parent',
7. template: `
8. <h2>{{master}} controls {{heroes.length}} heroes</h2>
9. <hero-child *ngFor="let hero of heroes"
10. [hero]="hero"
11. [master]="master">
12. </hero-child>
13. `
14. })
15. export class HeroParentComponent {
16. heroes = HEROES;
17. master = 'Master';
18. }

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

父组件监听子组件的事件

子组件使用@output（）装饰器使用emit传送带参数事件

1. import { Component, EventEmitter, Input, Output } from '@angular/core';
2.  
3. @Component({
4. selector: 'my-voter',
5. template: `
6. <h4>{{name}}</h4>
7. <button (click)="vote(true)" [disabled]="voted">Agree</button>
8. <button (click)="vote(false)" [disabled]="voted">Disagree</button>
9. `
10. })
11. export class VoterComponent {
12. @Input() name: string;
13. @Output() onVoted = new EventEmitter<boolean>();
14. voted = false;
15.  
16. vote(agreed: boolean) {
17. this.onVoted.emit(agreed);
18. this.voted = true;
19. }
20. }

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

1. import { Component } from '@angular/core';
2.  
3. @Component({
4. selector: 'vote-taker',
5. template: `
6. <h2>Should mankind colonize the Universe?</h2>
7. <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
8. <my-voter *ngFor="let voter of voters"
9. [name]="voter"
10. (onVoted)="onVoted($event)">
11. </my-voter>
12. `
13. })
14. export class VoteTakerComponent {
15. agreed = 0;
16. disagreed = 0;
17. voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
18.  
19. onVoted(agreed: boolean) {
20. agreed ? this.agreed++ : this.disagreed++;
21. }
22. }

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

既在子组件标签中加#xxx，xxx.即可调用子组件属性与方法

非常便利，但是只能在父组件模板中使用

父组件调用@ViewChild()

首先，你要使用ViewChild装饰器导入这个引用，并挂上AfterViewInit生命周期钩子。

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

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

1. import { AfterViewInit, ViewChild } from '@angular/core';
2. import { Component } from '@angular/core';
3. import { CountdownTimerComponent } from './countdown-timer.component';
4.  
5. @Component({
6. selector: 'countdown-parent-vc',
7. template: `
8. <h3>Countdown to Liftoff (via ViewChild)</h3>
9. <button (click)="start()">Start</button>
10. <button (click)="stop()">Stop</button>
11. <div class="seconds">{{ seconds() }}</div>
12. <countdown-timer></countdown-timer>
13. `,
14. styleUrls: ['demo.css']
15. })
16. export class CountdownViewChildParentComponent implements AfterViewInit { //导入AfterViewInit钩子工具
17.  
18. @ViewChild(CountdownTimerComponent) //注入子组件
19. private timerComponent: CountdownTimerComponent; //声明导入的子组件名
20.  
21. seconds() { return 0; }
22.  
23. ngAfterViewInit() {
24. // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
25. // but wait a tick first to avoid one-time devMode
26. // unidirectional-data-flow-violation error
27. setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0); //定时器将子组件方法移植到父组件
28. }
29.  
30. start() { this.timerComponent.start(); } //将子组件方法移植到父组件
31. stop() { this.timerComponent.stop(); } //将子组件方法移植到父组件
32. }

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

1创建可注入服务，父组件中导入服务模块，注入服务，通过providers，将 MissionControlComponent 提供服务的实例共享，并将其共享给它的子组件(通过 providers 元数据数组)，子组件可以通过导入服务模块+构造函数将该实例注入到自身。