先說說如何區分子元件、父元件。比如說我有一個元件A，他的選擇器是cmpA,然後B元件裡的html檔案裡用到了cmpA,那麼A元件就是子元件，B元件就是父元件。

做個比方，然後奉上程式碼 比如：

<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)">

input， [talk]="someExp" 這個標籤可以理解為一個專門的監聽器，監聽父元件傳遞過來的someExp引數，並存入自身元件的talk變數；好像是開了個後門，允許且只允許父元件的someExp進入，一旦進入立刻抓進一個叫talk的牢房，然後子元件中就可以通過@Input來定義這個變數talk然後使用它。

output ，(click)="eventHandler($event.rating) 這個意思是， 當子元件的click事件被觸發，就執行父元件的eventHandler函式，並把子元件的引數$event.rating傳遞給父元件的eventHandler函式；就好像，當小孩子一哭（執行click事件），他的母親立刻把他抱在懷裡（執行母親的eventHandler），同時母親獲得了小孩子的一些引數（$event.rating），上面的[talk]就相當於母親給孩子的禮物，但是孩子只能通過@input()去拿。

我的理解就是： input是子元件接受父元件傳進來的引數，output是子元件通過觸發事件向父元件傳資料

1. @input()

父元件 father.component.ts 提供資料

import {Component} from "@angular/core";
@Component({
    selector: "my-father",
    templateUrl: "father.html"
})
export class FatherComponent {
    data: Array<Object>;
    constructor() {
        this.data = [
            {
                "id": 1,
                "name": "html"
            },
            {
                "id": 2,
                "name": "css"
            },
            {
                "id": 3,
                "name": "angular"
            },
            {
                "id": 4,
                "name": "ionic"
            },
            {
                "id": 5,
                "name": "node"
            }
        ]
    }
}
 

模板檔案 father.html

<h1>父元件</h1>
// 包含子元件， 並使用屬性傳遞資料過去
<my-child [info]="data"></my-child>

子元件 child.component.ts 獲取資料

import {Component, Input} from "@angular/core";
@Component({
    selector: "my-child",
    templateUrl: "child.html"
})
export class ChildComponent {   
    // 使用@Input獲取傳遞過來的資料
    @Input()
    info: Array<Object>;
    constructor() {
    
    }
}

子元件 child.html模板檔案

<ul>
    <li *ngFor="let item of info">
        {{item.name}}
    </li>
</ul>

2、@Output()

子元件three-link.component.ts

1. 引入

import {Component, OnInit, Output, EventEmitter} from "@angular/core";

2. 定義輸出變數

export class ThreeLinkComponent {
    province: string;
    // 輸出一下引數
    @Output() provinceOut = new EventEmitter();   
    constructor() {
        this.province = "陝西";
    } 
}

3. 事件出發，發射變數給父元件

provinceChange() {
    // 選擇省份的時候發射省份給父元件
    this.provinceOut.emit(this.province);
}

父元件模板

<!--三級聯動元件-->
<three-link (provinceOut)="recPro($event)"></three-link>

父元件

// 函式接受子函式傳遞過來的變數， 子函式中emit的時候觸發這個函式。
recPro(event) {
   this.province = event;
}

3.另外一個父元件中訪問子元件中的方法

子元件CircleComponent中定義了 getColorRedFun(i)方法，父元件中想呼叫這個方法。 1、html中新增標記 #circleComponent 2、使用@ViewChild訪問子元件 3、ngAfterViewInit()以後才可以訪問到獲取的子元件 4、就可以通過 this.circleComponent訪問子元件中的屬性和方法了。

html
<page-circle #circleComponent></page-circle>

ts
export class HomePage {
  @ViewChild("circleComponent")
  circleComponent: CircleComponent;
  ngAfterViewInit() {
    console.log(this.circleComponent);
    this.circleComponent.getColorRedFun(4);
  }
}