Angular组件通信

一.父传子

1.子组件

import { Input } from '@angular/core';
export class HeroChildComponent {
  @Input() masterName: string;
}

2.父组件

自定义指令

二.子传父

1.子组件

import { EventEmitter, Output } from '@angular/core';
export class VoterComponent {
  @Output() voted = new EventEmitter<boolean>();
  
  vote(agreed: boolean) {
    this.voted.emit(agreed);
  }
}

2.父组件

父组件做事件监听

三.父组件调用

1.父组件

import { ViewChild } from '@angular/core';
export class CountdownViewChildParentComponent implements AfterViewInit {
	@ViewChild(CountdownTimerComponent)
	private timerComponent: CountdownTimerComponent;
}

四.服务service