Angular2将属性传递给类构造函数

shmck 发表于 Dev

如何将属性从父组件传递到其子组件的类构造函数中Angular 2？

由于属性可以毫无问题地传递到视图，因此可以解决一半的谜团。

/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);
  }
}

要重申：

如何访问从父组件传入的子组件类中的属性？

回购

埃里克·马丁内斯（Eric Martinez）

更新至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);
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。