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

Question

如何将属性从父组件传递到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);
  }
}

要重新迭代：

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

回购

Answer 1

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

Answer 2

如果要访问子组件中的属性值，可以：

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方法总是在构造函数之后执行
• 我不知道为什么但是set方法中的参数名必须与此方法的名称相同（因此它意味着它必须与属性名称相同）