组件交互及动态组件加载

1. 通过输入型绑定把数据从父组件传到子组件。
   • 父：   <app-hero-child *ngFor="let hero of heroes" [hero]="hero" [master]="master"></app-hero-child>
   • 子：   

• export class HeroChildComponent {
• @Input()hero:Hero;
• @Input('master')masterName:string;

• }

2. 通过setter截听输入属性值的变化（仅一个，待验证）
   • 
   • 
3. 通过ngOnChanges()来截听输入属性值的变化（当需要监视多个、交互式输入属性的时候，本方法比用属性的setter更合适。）
   1. 父： <app-version-child [major]="major" [minor]="minor"></app-version-child>
   2. 子：<li >{{change}}</li>
      • @Input()major:number;
      • @Input()minor:number;
      • ngOnChanges(changes:{[propKey:string]:SimpleChange}) { this.change = changees; }
   • 子组件监视父组件中所传值的变化，父值变化子值会进行更新
4. 父组件监听子组件的事件
   1. 父： <app-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"></app-voter>
   2. 子：
      • @Input()name:string;
      • @Output()onVoted = new EventEmitter<boolean>();
      • vote(agreed:boolean){
        • this.onVoted.emit(agreed);
        • this.voted= true;
      • }
5. 父组件与子组件通过本地变量互动（父组件不能直接访问子组件的属性和方法，但可通过本地变量进行访问）
   1. 父：
      • 
   2. 子：声明方法与属性
6. 父组件调用@ViewChild()：    通过本地变量父组件只能在模板中访问子组件的属性和方法，而无法通过类访问子组件
   1. 父：（视图同5）
      • 
      • 
   2. 子：同上
7. 父组件和子组件通过服务来通讯（子父组件同享一个服务，利用此服务来进行通讯）
   1. 在服务中定义方法与属性
   2. 父组件通过调用服务中的方法来修改共同的属性
8. 动态组件加载
   1. 使用@Directive({ selector: '[ad-host]', })定义组件
   • 与直接使用@ViewChild()加载的区别：在某个条件加载该组件