angular组件之间通信的机制

1 输入性属性： 通常带着@Input装饰器

2 通过setter截听属性值的变化。使用一个输入属性的setter， 以拦截父组建中值的变化，并采取行动;

eg: export ChildComponent {

　　private _name = '';

　　@Input()  set name( name: string) { this._name = (name && name.trim()) || '< no name set >'

 

　　get name() : string { return this._name};

 

}

@Component ({

　　template: `

<h2>Master controls {{names.length}} names</h2>

<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>`

})

 

3 ngOnChanges() 来截听输入属性值的变化。

 

父组件监听子组件的事件。 

子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性emits(向上弹射）事件。通常带有@Output装饰器，

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
selector: 'app-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="didVote">Agree</button>
<button (click)="vote(false)" [disabled]="didVote">Disagree</button>
`
})
export class VoterComponent {
@Input() name: string;
@Output() voted = new EventEmitter<boolean>();
didVote = false;

vote(agreed: boolean) {
this.voted.emit(agreed);
this.didVote = true;
}
}

#------------------父组件接收子组件的方法------------#

import { Component } from '@angular/core';

@Component({
selector: 'app-vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-voter *ngFor="let voter of voters"
[name]="voter"
(voted)="onVoted($event)">
</app-voter>
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Narco', 'Celeritas', 'Bombasto'];

onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}

 

父组件与子组件通过本地变量互动， 父组件不能使用数据绑定来读取子组件的属性。 把本地变量(#var) 放到子组件的tag中，用来代表子组件。

这样父组件的模板就得到了子组件的引用，于是可以在父组件的模板中访问

 

父组件调用@viewChild() 。这个本地变量方法是简单便利的方法，但是父组件-子组件的连接必须全部在父组件的模板中进行，父组件本身的代码对子组件没有访问权限。

如果父组件的类需要读取子组件的属性或调用子组件的方法，就不能使用本地变量方法。当父组件类需要这种访问时，可以把子组件作为ViewChild, 注入到父组件中。

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
selector: 'app-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>
<app-countdown-timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {

@ViewChild(CountdownTimerComponent, {static: false})
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(); }
}

 

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

父组件和子组件共享同一个服务，利用该服务在组件家族内部实现双向通讯。 该服务的作用域被限制在父组件和其子组件之内，这个组件子树之外的组件将无法访问该服务或与他们通信。

eg:

import { Injectable } from '@angular/coore';

import { Subject} from 'rxjs';  // Subject(主体） 相当于EventEmitter,并且是将值或事件多路推送给多个Observer的唯一方式。

@Injectable()

export class MissionService {

// Observable string source

private mission AnnouncedSource = new Subject<string>();

private missionConfirmedSource = new Subject<string>();

 

//Observable string streams

missionAnnouced$ = this.missionAnnouncedSource;asObservable();

missionConfirmed$ = this.missionCOnfirmedSource.asObservable();

 

// Service message commands

announceMission(mission: String) { this.missionAnnounceSource.next(mission);}

confirmMission(astronaur: String) {this.missionConfirmedSource.next(astronaur);}

}

 

其中子组件： missionService.missionAnnoiced$.subscribe(res => {})