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

Question

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

解开了一半的谜团，因为属性可以毫无问题地传递给视图。

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

再次重申：

How can I access an attribute inside the child component's class passed in from the parent component?

Repo

Answer 1

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

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方法中的参数名称必须与该方法的名称相同（所以这意味着它必须与属性的名称相同）

Answer 2

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

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

Angular2 pass attribute to class constructor

typescript

angular

/client/app.ts

/client/example.ts