Is there a way to transfer attributes from a parent component to the constructor of their child components in Angular 2?
The process is halfway solved, with attributes being successfully passed to the view.
/client/app.ts
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);
/client/example.ts
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);
}
}
To sum up:
Is it possible to retrieve an attribute within the child component's class that was provided by the parent component?