angular4.0 父子組建之間的相互通信

• 父組建---->子組建 傳遞信息

• 首先先通過angular腳手架生成兩個基本組件，有一個好處是
  會自動關聯到跟模版，節約時間，而且還是偷懶

• ng generate component component-name 這句話有簡寫的方式，可以自己去搜

• demo如下

    //father.component.ts
    @Component({
    selector: 'app-component-father',
    template:`
    <son [title]="'這是父組件定義的數據標題'"></son>
    `,
     })
    export class ComponentFatherComponent {
    }
    //
    import { Component, Input } from '@angular/core';

    @Component({
    selector: 'son',
    template:`
        <h1>{{ title }}</h1>
    `,
    styleUrls: ['./component-son.component.css']
    })
    export class ComponentSonComponent{
    @Input() title: string;
    }

• 我們來看看，這倒底是神馬一回事兒，第一次聽到組件通訊
  頓時覺得高大上，理清思路之后，這簡直弱爆了，就是屬性綁定

• 首先在子組建 需要引入輸出接口 ---就是這個一個玩意,多了一個input，
  表示輸入的意思，可以叫什么裝飾器屬性

    import { Component, Input } from '@angular/core';

• 把這玩意塞到 你在類里面定義的屬性前--像這樣

    @Input() title: string;

• 在模版里面使用插值表達式輸出title---由於沒有賦值，所以是沒有結果的結果
  這時候這倒父組件發揮作用---請看下面

    @Component({
    selector: 'app-component-father',
    template:`
    <son [title]="'這是父組件定義的數據標題'"></son>
    `,
     })
    export class ComponentFatherComponent {
    }

• 干干凈凈的父組建什么東西都沒有

    [title]="'這是父組件定義的數據標題'"

• 就是東西 等號左邊是 被綁定的屬性 ,也就是子組建需要的東西的名字，
  等號右邊就是你想輸入的東西，你輸什么鬼，頁面就顯示什么鬼

• 饒了半天其實就是一個屬性綁定的過程----說實話官網的那些文檔只能看代碼

• 子組建----〉父組件 的有時間 再說