摘要：方式，定義了的鉤子也是可以引用的直接觀察某一個(gè)子組件調(diào)用的時(shí)候變身啦超級(jí)賽亞人變身啦超級(jí)賽亞人可以思考一下，是否任何形式的父組件流入子組件的方式，都可以觸發(fā)方法。其中，需要注意的是作用域的隔離，子組件可以很好的隔離作用域。

以下的測(cè)試?yán)佣伎梢栽?github 找到，但是最近好像不太穩(wěn)定。

其實(shí) ng2 在這方面做得挺好的，用起來(lái)也很簡(jiǎn)單，所以看完基本就可以動(dòng)手寫(xiě)一寫(xiě)。強(qiáng)大并不止是這一方面，在寫(xiě)這些的過(guò)程中，通過(guò)一些配置，讓開(kāi)發(fā)很純粹，有時(shí)間再錄一個(gè)新手入門(mén)的開(kāi)發(fā)教程。

這種方式是最簡(jiǎn)單的，在 ng2 中處理得非常完美，通過(guò)在子組件中標(biāo)記 @Input() 輸入接口的方式進(jìn)行接收父組件的值，我下面的 demo 主要分了幾種場(chǎng)景，盡可能的多覆蓋不同情況吧。

基本上例子中覆蓋了常見(jiàn)的情況：

直接傳入一個(gè)字符串的情況，不需要綁定父組件的一個(gè)變量

綁定父組件變量的情況，然后可以在父組件中不斷修改

輸入別名的情況，可以在子組件中對(duì)輸入的變量名進(jìn)行重新設(shè)置

ngOnChanges() 在子組件中監(jiān)聽(tīng)屬性的修改

特殊情況下，我們需要對(duì)父組件傳入的數(shù)據(jù)進(jìn)行過(guò)濾

@ViewChild() 注解的跨多層子組件的觀察方式

說(shuō)了這么多，來(lái)看一下實(shí)際的代碼吧。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    baby: string = "你的名字";
    
    constructor() { }
    
    ngOnInit() {
    }
    
}

// Parent html
請(qǐng)輸入 Baby 的名字：
 

    

// Child component
import { Component, OnInit, Input, SimpleChange } from "@angular/core";

@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Input() babyName: string;
    @Input() inputBabyName: string;
    @Input("aliasBabyName") aliasName: string;
    
    changes: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    ngOnChanges(changes: SimpleChange) {
        this.changes = JSON.stringify(changes);
    }
}

// Child html
我是子組件的屬性(babyName) => {{babyName}}
我是跟父組件來(lái)：{{inputBabyName}}
我是 aliasBabyName => aliasName：{{aliasName}}

那么我需要過(guò)濾一下值要怎么弄呢？

這樣我們就可以用到 setter 和 getter 的特性來(lái)做，具體如下：

// Child component
_filterName: string = "";
    
@Input()
set filterName(n: string) {
    this._filterName = n + "wowo~~~";
}
    
get filterName() {
    return this._filterName;
}

// Parent html

這個(gè)其實(shí)也是用 @Input() 這個(gè)注解來(lái)做的，有點(diǎn)類(lèi)似 computed 的概念吧，但是這樣做對(duì)于習(xí)慣 Java 的小伙伴是很友好的，其實(shí)通過(guò)一些權(quán)限的設(shè)置，還能夠更加的強(qiáng)大。

@ViewChild() 的方式

這種方式我覺(jué)得更多的是，我的溝通邏輯存在于 TS 中的時(shí)候就很實(shí)用。并且是描述性的定義方式，所以邏輯也是清晰的。

// Parent component
// 方式1，定義了 `#` 的鉤子也是可以引用的
@ViewChild("child") cc: ChildComponent;
    
// 直接觀察某一個(gè)子組件
@ViewChild(ChildComponent)
cc_other: ChildComponent;
    
// 調(diào)用的時(shí)候
this.cc.name = "變身啦！超級(jí)賽亞人";
this.cc_other.name = "變身啦！超級(jí)賽亞人 4";

可以思考一下，是否任何形式的父組件流入子組件的方式，都可以觸發(fā) ngOnChanges() 方法。

從軟件的結(jié)構(gòu)上來(lái)講，是上層抽象對(duì)底層的具體實(shí)現(xiàn)是隱藏的，所以具體層的東西最好盡可能少的知道抽象層的事情，也許表達(dá)方式不一樣，但是這樣的話封閉性會(huì)好很多，更多的暴露是以某一個(gè)權(quán)限開(kāi)放的接口形式。但是通信是很復(fù)雜的東西，就好像人與人之間的聯(lián)系是一樣的。好吧，我們來(lái)具體說(shuō)一下子組件怎么訪問(wèn)父組件。主要通過(guò)的方式是：

在子組件定義一個(gè) @Output() 的 EventEmitter 對(duì)象，這個(gè)對(duì)象可以是 Subject 的形式存在，也就是可以使用 RxJS 的思想來(lái)做，其中 T 范型表示定義需要傳入的數(shù)據(jù)具體類(lèi)型。

父組件中定義一個(gè)自己的函數(shù)來(lái)修改自身的信息，或者再傳入其他子組件使用。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    babyName: string;
    
    constructor() { }
    
    ngOnInit() {
    this.babyName = "小擼一號(hào)";
    }
    
    changeBabyName(newBabyName) {
        this.babyName = newBabyName;
    }
 
}

// Parent html
BabyName：{{babyName}}

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
    
@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Output()
    changeBabyName: EventEmitter = new EventEmitter();
    
    rhashcode = /d.d{4}/;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    getNewBabyName(e) {
        let newName = this.makeHashCode("小擼新號(hào)");
        this.changeBabyName.next(newName);
    }
    
    /* UUID http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript */
    makeHashCode(prefix) {
        prefix = prefix || "60sky";
        return String(Math.random() + Math.random()).replace(this.rhashcode, prefix);
    }
}

我要改我自己的名字

其中需要注意的是父組件中方法注入的 $event 對(duì)象，這個(gè)對(duì)象在這里注入的是子組件傳入的值，所以在父組件中就可以直接使用了，我這里定義了 string 類(lèi)型的數(shù)據(jù)，所以傳入后定義接口的參數(shù)類(lèi)型也是相對(duì)應(yīng)的。

ng2 在無(wú)關(guān)組件的處理上，真的處理得很干脆，給你一個(gè)鉤子，你用吧！就是這種簡(jiǎn)單的思路。這里我只介紹部分，因?yàn)楣俜轿臋n有更加詳細(xì)的介紹，不然我這篇文章就寫(xiě)得太長(zhǎng)了～因?yàn)榉绞接泻芏喾N，發(fā)揮小聰明就能發(fā)現(xiàn)很多。

事件回調(diào)傳來(lái)傳去的方式

Service 的注入

# 鉤子的方式

這里介紹的是一個(gè) # 鉤子的方式來(lái)做，直接來(lái)代碼吧，很方便的。
其中，需要注意的是作用域的隔離，子組件可以很好的隔離作用域。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    babyName: string = "小擼一號(hào)";
    
    constructor() { }
    
    ngOnInit() {
    }
    
}

// Parent html

    

// Child component
import { Component, OnInit, Input } from "@angular/core";
    
@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Input() childName: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
}

Child：{{childName}}

// OtherChild component
import { Component, OnInit, Input } from "@angular/core";
    
@Component({
    selector: "app-otherChild",
    templateUrl: "./otherChild.component.html",
    styleUrls: ["./otherChild.component.css"]
})
export class OtherChildComponent implements OnInit {
    
    @Input() helloBaby: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    changeChildName(e) {
        this.helloBaby = "小擼新號(hào)";
    }
}

// OtherChild html
otherChild：{{helloBaby}}
我來(lái)統(tǒng)一修改一下

其實(shí)還有一些方式和特殊場(chǎng)景下的處理，所以總體來(lái)說(shuō)，ng2 在這方面是不錯(cuò)的～