[英]Angular2 pass attribute to class constructor
如何將屬性從父組件傳遞到Angular 2
的子組件的類構造函數?
計算出一半的神秘感,因為屬性可以毫無問題地傳遞給視圖。
import {Component, View, bootstrap} from 'angular2/angular2';
import {Example} from 'client/example';
@Component({
selector: 'app'
})
@View({
template: `<p>Hello</p>
<example [test]="someAttr"
[hyphenated-test]="someHyphenatedAttr"
[alias-test]="someAlias"></example>
`,
directives: [Example]
})
class App {
constructor() {
this.someAttr = "attribute passsed to component";
this.someHyphenatedAttr = "hyphenated attribute passed to component";
this.someAlias = "attribute passed to component then aliased";
}
}
bootstrap(App);
import {Component, View, Attribute} from 'angular2/angular2';
@Component({
selector: 'example',
properties: ['test', 'hyphenatedTest', 'alias: aliasTest']
})
@View({
template: `
<p>Test: {{test}}</p>
<!-- result: attribute passsed to component -->
<p>Hyphenated: {{hyphenatedTest}}</p>
<!-- result: hyphenated attribute passed to component -->
<p>Aliased: {{alias}}</p>
<!-- result: attribute passed to component then aliased -->
<button (click)="attributeCheck()">What is the value of 'this.test'?</button>
<!-- result: attribute passed to component -->
`
})
/*******************************************************************
* HERE IS THE PROBLEM. How to access the attribute inside the class?
*******************************************************************/
export class Example {
constructor(@Attribute('test') test:string) {
console.log(this.test); // result: undefined
console.log(test); // result: null
}
attributeCheck() {
alert(this.test);
}
}
要重新迭代:
如何訪問從父組件傳入的子組件類中的屬性 ?
已更新至beta.1
您可以使用ngOnInit
@Component({
selector: 'example',
inputs: ['test', 'hyphenatedTest', 'alias: aliasTest'],
template: `
<p>Test: {{test}}</p>
<!-- result: attribute passsed to component -->
<p>Hyphenated: {{hyphenatedTest}}</p>
<!-- result: hyphenated attribute passed to component -->
<p>Aliased: {{alias}}</p>
<!-- result: attribute passed to component then aliased -->
<button (click)="attributeCheck()">What is the value of 'this.test'?</button>
<!-- result: attribute passed to component -->
`
})
export class Example {
ngOnInit() {
console.log(this.test);
this.attributeCheck();
}
attributeCheck() {
alert(this.test);
}
}
如果要訪問子組件中的屬性值,可以:
import {Component, View, Attribute} from 'angular2/angular2';
@Component({
selector: 'example',
properties: ['test', 'hyphenatedTest', 'alias: aliasTest']
})
@View({
template: `
<p>Test: {{_test}}</p>
<!-- result: attribute passsed to component -->
<p>Hyphenated: {{_hyphenatedTest}}</p>
<!-- result: hyphenated attribute passed to component -->
<p>Aliased: {{_alias}}</p>
<!-- result: attribute passed to component then aliased -->
`
})
export class Example {
_test: string;
_hyphenatedTest: any; //change to proper type
_alias: any; //change to proper type
constructor() {
}
set test(test) {
this._test = test;
}
set hyphenatedTest(hyphenatedTest) {
this._hyphenatedTest = hyphenatedTest;
}
set alias(alias) {
this._alias = alias;
}
}
屬性值更改時運行set
方法。 值將傳遞到您可以在組件中操作的本地變量。
重要的事:
set
方法中的參數名必須與此方法的名稱相同(因此它意味着它必須與屬性名稱相同)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.