原文：https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

這個(gè)教程適合初學(xué)者看，這里介紹的是最常見的三種通信方式。
如圖，下面的頁面里有個(gè)名為side-bar的組件，組件內(nèi)部有個(gè)toggle方法，可以控制顯示或隱藏，這個(gè)需要其他組件來調(diào)用toggle的方法。

image.png

我們可以通過以下三種方式來實(shí)現(xiàn)：

1. 傳遞一個(gè)組件的引用給另一個(gè)組件
2. 通過子組件發(fā)送EventEmitter和父組件通信
3. 通過serive通信

每個(gè)例子都會(huì)有StackBlitz在線演示地址

1. 傳遞一個(gè)組件的引用給另一個(gè)組件

Demo1
模板引用變量

模板引用變量通常用來引用模板中的某個(gè) DOM 元素，它還可以引用 Angular 組件或指令或Web Component。
使用井號(hào) (#) 來聲明引用變量。 #phone 的意思就是聲明一個(gè)名叫 phone 的變量來引用 <input> 元素

這種方式適合組件間有依賴關(guān)系。
app component

<app-side-bar-toggle [sideBar]="sideBar"></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>

app.component.html

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  @Input() sideBar: SideBarComponent;

  @HostListener('click')
  click() {
    this.sideBar.toggle();
  }
}

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

2. 通過子組件發(fā)送EventEmitter和父組件通信

Demo2
這種方式利用事件傳播，需要在子組件中寫
app.component.html

<app-side-bar-toggle (toggle)="toggleSideBar()"></app-side-bar-toggle>
<app-side-bar [isOpen]="sideBarIsOpened"></app-side-bar>

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  sideBarIsOpened = false;

  toggleSideBar(shouldOpen: boolean) {
    this.sideBarIsOpened = !this.sideBarIsOpened;
  }
}

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  @Output() toggle: EventEmitter<null> = new EventEmitter();

  @HostListener('click')
  click() {
    this.toggle.emit();
  }
}

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open') @Input()
  isOpen = false;
}

3. 通過service進(jìn)行通信

Demo3
這里需要新建side-bar.service，我們把toggle方法寫到service文件中，
然后將service注入到side-bar-toggle.component和side-bar-toggle.component，前者調(diào)用toggle方法，發(fā)送事件流，后者訂閱事件

app.component.html

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  constructor(
    private sideBarService: SideBarService
  ) { }

  @HostListener('click')
  click() {
    this.sideBarService.toggle();
  }
}

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  constructor(
    private sideBarService: SideBarService
  ) { }

  ngOnInit() {
    this.sideBarService.change.subscribe(isOpen => {
      this.isOpen = isOpen;
    });
  }
}

side-bar.service.ts

@Injectable()
export class SideBarService {

  isOpen = false;

  @Output() change: EventEmitter<boolean> = new EventEmitter();

  toggle() {
    this.isOpen = !this.isOpen;
    this.change.emit(this.isOpen);
  }
}