9/29angular组件交互

一、父组件传给子组件

1、子组件接收父组件传入的数据

在子组件中，用@input标记要从父组件获取的数据变量名，@input() hero：HERO[]，父组件的html模板中用[子组件变量名] = "父组件变量名"绑定

example：

父组件：

   

子组件

2、用set 和get来处理父组件传入的数据，和第一种的区别就是set相当于用一个函数处理了一下传入数据，再用get返回

父组件传入的是name变量

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

其中names的值是，带有一个是空格的名字
names = ['Mr. IQ', '   ', '  Bombasto  '];

子组件set name（）和get name（）的name要和父组件传绑定对的变量名一致

@Component({
  selector: 'app-name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  private _nam = '';

  @Input()
  set name(name1: string) {
    this._nam = (name1 && name1.trim()) || '<no name set>';
  }

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

3、用onChanges，

ngOnchanges在父组件初始化或修改子组件的输入参数下调用，用在有输入属性的子组件上。

（转载https://blog.youkuaiyun.com/baobab_cc/article/details/79227862）

在什么情况下调用？：当修改子组件参数时，只有以下情况ngOnchanges才会被调用

• 子组件的参数为输入属性且为不可变对象变化时
  • 输入属性：@Input()属性
  • 不可变对象：原始值（undefined、null、布尔值、数字和字符串）
  • 可变对象：对象（包括数组和函数）

只有修改不可变对象时才会调用 onChanges，调用可变对象时不会调用。和前两种不同，前两种趋向于静态的，onChanges是动态的，父组件参数会改变，子组件随父组件改变

二、子组件传给父组件，@Output和EventEmitter<>(),emit

1、通过事件来交互

父组件html模板中的子组件，voted来自子组件，是一个事件发射器，onVoted是父组件的，处理子组件发射到父组件的事件。
<app-voter *ngFor="let voter of voters"
      [name]="voter"
      (voted)="onVoted($event)">

子组件代码
 @Output() voted = new EventEmitter<boolean>();
 
  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }

2、#方法插在子组件标签里代表子组件名

父组件不能通过数据绑定使用子组件的 start 和 stop 方法，也不能访问子组件的 seconds 属性。

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

直接在父组件创建一个timer变量指代子组件，就可以访问所有子组件中的方法？？？什么鬼啊
<button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
  <app-countdown-timer #timer></app-countdown-timer>

3、用viewChild

4、通过服务，不同组件之间交互