父元件傳給子元件：

子元件設定@Input屬性,父元件即可通過設定html屬性給子元件傳值。
子元件：

  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }

上面的程式碼設定了兩個可供父元件傳入的屬性:title和name,當設定name屬性時，set name(name:string)方法會執行,如果不需要處理setter，那麼用title的形式，一行程式碼宣告即可.

父元件呼叫:

<app-header [title]="title" name="姓名"></app-header>

呼叫方法有兩種，屬性名用中括號包圍的title，值title是父元件中的物件名，而name沒有用中括號，後面的值就是傳給子元件的字串。當然，不用中括號，也可以用{{name}}傳物件的值。

如果要監聽傳入屬性值的變化，可以在子元件實現OnChanges（@angular/core中）介面：

export class HeaderComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void
 
 {
    console.log(changes['title']);
  }
  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }

}

SimpleChanges 是一個用屬性名作key的陣列，通過屬性名取出物件，物件裡包含該屬性變化前(previousValue)後(currentValue)的值。

父元件監聽子元件變化

子元件通過@Output()暴露EventEmitter，父元件在宣告子元件時增加EventEmitter的回撥方法，子元件在需要的時候彈射事件，父元件的回撥方法裡就能收到。
子元件：

export class HeaderComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes['title']);
  }
  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }
  //宣告事件發射器
  @Output() checkEmitter=new EventEmitter<boolean>();
  //用於繫結checkbox的checked屬性
  isChecked=true;

  toggle() {
    this.isChecked=!this.isChecked;
    //發射事件
    this.checkEmitter.emit(this.isChecked);
  }
}

子元件模板:

<p>
  {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>

父元件中宣告:

<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>

父元件事件回撥接收:

export class AppComponent implements AfterViewInit{
  ngAfterViewInit() {

  }
  onCheckedChange(isChecked:boolean) {
    console.log("checkbox選中狀態："+isChecked);
  }
}

元件之間通訊-使用服務通訊模式

import { Injectable } from ‘@angular/core‘;
 import {Subject}from"rxjs/Subject";
 @Injectable()
 export class CService {
  private outputTitle = new Subject();
   //訂閱
 //宣告變數 訂閱Observer
   output$ = this.outputTitle.asObservable();
   //推送  呼叫next方法 Subject會向所有已經在其上註冊的Observer多路推送 theValue
   UpData(message:any) {
     this.outputTitle.next(message);
   }
 }

2、子元件釋出訊息（）

       首先注入服務cs : CService

    this.CS.UpData({title:"鈴鐺寵物",ico:""});//推送資料更新

3、目標元件訂閱該訊息，多個目標可同時訂閱
    rms為已注入的服務 rms:CService
   

觀察者模式又叫釋出訂閱模式（Publish/Subscribe），它定義了一種一對多的關係，讓多個觀察者物件同時監聽某一個主題物件，這個主題物件的狀態發生變化時就會通知所有的觀察者物件，使得它們能夠自動更新自己。

我們可以使用日常生活中，期刊訂閱的例子來形象地解釋一下上面的概念。期刊訂閱包含兩個主要的角色：期刊出版方和訂閱者，他們之間的關係如下：

• 期刊出版方 - 負責期刊的出版和發行工作

• 訂閱者 - 只需執行訂閱操作，新版的期刊釋出後，就會主動收到通知，如果取消訂閱，以後就不會再收到通知

在觀察者模式中也有兩個主要角色：Subject (主題) 和 Observer (觀察者) 。它們分別對應例子中的期刊出版方和訂閱者。

原文：https://www.pocketdigi.com/20170125/1555.html