AngularJS提供$http控制，可以作為一項(xiàng)服務(wù)從服務(wù)器讀取數(shù)據(jù)。服務(wù)器可以使一個(gè)數(shù)據(jù)庫(kù)調(diào)用來(lái)獲取記錄。 AngularJS需要JSON格式的數(shù)據(jù)。一旦數(shù)據(jù)準(zhǔn)備好，$http可以用以下面的方式從服務(wù)器得到數(shù)據(jù)。
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});

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

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

　　宿主通過(guò)“[輸入屬性]=輸入值”的方式傳值，給屬性打上中括號(hào)代表輸入。以上面例子為例，其父組件調(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ù)對(duì)輸入的數(shù)據(jù)進(jìn)行加工過(guò)濾，這里不做細(xì)講。
　　2)配置outputs,給父組件傳遞數(shù)據(jù)：
　　outputs是利用自定義事件的機(jī)制給父組件傳遞數(shù)據(jù)；元數(shù)據(jù)配置與inputs相似，只是組件類中要給輸出屬性創(chuàng)建EventEmitter實(shí)例。
　　示例如下：

@Component({
selector: 'test-component',
template: `<button (click)="clickToSend()">點(diǎn)擊按鈕，輸出數(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í)函數(shù)。
}
}

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

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

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

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

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

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

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

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