一、元數(shù)據(jù)傳遞
　　1)配置inputs，接收外部傳來的參數(shù)：
　　在inputs里配置輸入屬性，宿主同過這個屬性就能把數(shù)據(jù)傳進(jìn)來。
　　示例如下：

@Component({
selector: 'test-component',
template: `{{inputValue}}`,
inputs: ['inputsValue']
})
export class TestComponent {
private inputsValue;//注意，要在組建內(nèi)聲明，才能使用
}

　　宿主通過“[輸入屬性]=輸入值”的方式傳值，給屬性打上中括號代表輸入。以上面例子為例，其父組件調(diào)用方式如下:

@Component({
selector: 'parent-component',
template: `<test-component [inputsValue]="data"></test-component>`//以“[屬性]=值”的方式傳遞
})
export class ParentComponent {
private data = 'Hello InputValue~!';
}

　　當(dāng)然，如果不配置元數(shù)據(jù)，我們還可以在組件類中用“@Inputs() inputsValue”聲明，效果一樣；我們還可以編寫“setter”函數(shù)對輸入的數(shù)據(jù)進(jìn)行加工過濾，這里不做細(xì)講。
　　2)配置outputs,給父組件傳遞數(shù)據(jù)：
　　outputs是利用自定義事件的機(jī)制給父組件傳遞數(shù)據(jù)；元數(shù)據(jù)配置與inputs相似，只是組件類中要給輸出屬性創(chuàng)建EventEmitter實例。
　　示例如下：

@Component({
selector: 'test-component',
template: `<button (click)="clickToSend()">點擊按鈕，輸出數(shù)據(jù)</button>`,
outputs: '[outputValue]'
})
export class TestComponent {
public outputValue = new EventEmmitter;
private clickToSend() {
this.outputValue.emit('Hello OutputValue~!');//注意，自定義事件必須要借助異步程序執(zhí)行發(fā)布函數(shù)；異步程序有事件、前后端數(shù)據(jù)交互、延時函數(shù)。
}
}

　　outputs相當(dāng)于給組件聲明了一個自定義事件，父組件綁定該事件就能與輸出機(jī)制建立聯(lián)系，輸出數(shù)據(jù)就是事件對象。
　　以上面例子為例，父組件示例如下：

@Component({
selector: 'parent-component',
template: `<test-component (outputValue)="getValue($event)"></test-component>`//屬性加上小括號代表輸出
})
export class ParentComponent {
private getValue(event) {
console.log(event);//Hello OutputValue~!
}
}

　　同樣，你也可以用@Output來聲明，這里不做細(xì)講。

二、單例模塊傳遞
　　JavaScript傳值策略是：基本類型數(shù)據(jù)傳數(shù)據(jù)副本，對象類型數(shù)據(jù)傳對象引用。Angular2各模塊注入Module中，只要在Module作用域范圍，這些模塊再通過依賴注入方式注入到別的模塊，依賴的模塊是單例的。
　　我們可以利用對象傳引用的特性，達(dá)到組件間傳遞數(shù)據(jù)的目的。
　　比如我想將數(shù)據(jù)傳給子組件，只需在子組件構(gòu)造器中注入該組件，該組件由于是單例的，那么一方改動另一方能實時訪問到。
　　示例如下：

//父組件：
@Component({
selector: 'parent-component',
template: `
<p>{{value}}</p>
<child-component></child-component>
`
})
export class ParentComponent {
public value = 'Parent Value...';//注意！這里不能使用private權(quán)限，否則外部模塊無法訪問到這個屬性。
}

//子組件：
@Component({
selector: 'child-component',
template: `{{_parent.value}}`
})
export class ChildComponent {
constructor(private _parent: ParentComponent) {}//注入父組件的實例，就能訪問到父組件非私有屬性了。
}

　　結(jié)果是<p>Parent Value...</p><child-component>Parent Value...</child-component>
　　你還可以用指令、管道、服務(wù)來傳值，只要是單例模塊，都能做到；不過為了代碼內(nèi)聚性，建議只使用組件或者服務(wù)作為值傳遞的媒介。

還有別的傳值方式嗎？
　　當(dāng)然還有，比如繞過Angular2的API，使用JQuery的data函數(shù)進(jìn)行值的獲取和傳遞。不建議這么做，Angular不鼓勵開發(fā)者直接操作DOM，它內(nèi)置了一系列指令以及機(jī)制來弱化開發(fā)者對DOM的直接操作，開發(fā)者使用Angular提供的API可以減少很多操作DOM的代碼。
分類: Angular2
標(biāo)簽: angular2, 組件, 傳值

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, OnDestroy, Component} from '@angular/core';
@Component({...})
export class MyComponent implements OnInit, OnDestroy {
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
// subscribe to router event
this.activatedRoute.params.subscribe((params: Params) => {
let userId = params['userId'];
console.log(userId);
});
}
}
如果要獲取查詢參數(shù)，請將this.activatedRoute.params替換為this.activatedRoute.queryParams
關(guān)于不支持的說明
@Reto和@ codef0rmer非常正確地指出，根據(jù)官方文檔，unsubscribe()內(nèi)部的組件onDestroy()方法在這種情況下是不必要的。