Question

我想修改组件实例的字段。例如，在test.component.ts中：

@Component({
    selector: 'test',
})
export class TestComponent {    
    @Input() temp;
    temp2;
    constructor(arg) {
        this.temp = arg;
        this.temp2 = arg * 2;
    }
}

我想使用构造函数设置temp和temp2的值。我知道一种方法是通过执行以下操作来使用输入属性：

<test [temp]='1'></test>

但是，这是在构建时间之后完成的，temp2不会相应地改变。如何从消费者的角度提供组件构造函数参数，以便在构造时设置“temp”和“temp2”的值？

谢谢！

Answer 1

事实上，由于组件生命周期，组件的输入只能从ngOnInit方法获得：

@Component({
    selector: 'test',
})
export class TestComponent {    
    @Input() temp;

    ngOnInit() {
        console.log(this.temp);
    }
}

此外，我们只能在组件构造函数中使用通过依赖注入提供的参数。

因此，您不能将构造函数用于临时属性，因为组件生命周期。关于它取决于你如何使它可用。如果它是通过依赖注入，它将工作但你需要使用@Inject装饰器来指定要注入的内容。

您还可以查看此问题以获取更多详细信息：

Difference between Constructor and ngOnInit

Answer 2

<强> sharedServcie.ts

import {Injectable} from 'angular2/core';

@Injectable()
export class sharedService{
  test:string="Angular2";
}

<强> boot.ts

import {sharedService} from './sharedService';
...
...
bootstrap[App,[sharedService]]

import {sharedService} from './sharedService';
@Component({
    selector: 'test',
})
export class TestComponent {    
    temp;
    constructor(sharedService:sharedService) {
        this.temp = sharedService.test;
        console.log(this.temp) //Angular2
    }
}

Answer 3

我认为answer Thierry Templier解释了您的问题，但

你在评论中说：

我更新了问题，希望这可以更清楚。通过使用输入属性，我只能改变temp，但temp2不会更新相应

我希望这是你想要实现并帮助你的。

    import {Input, Component} from 'angular2/core'

    @Component({
      selector: 'my-test',
      template: `
      <h1> arg value:    {{ arg }} </h1>
      <h1> temp value:   {{ temp }} </h1>
      <h1> temp1 value:  {{ temp1 }} </h1>
    `
    })

    export class test {
      @Input() arg  : number;
      temp : number;
      temp1: number;

      constructor(){

      }

      ngOnInit(){
        this.temp  = this.arg;
        this.temp1 = this.arg * 2;
      }

    }

    @Component({
      selector: 'my-app',
      directives: [test],
      template: `
      <h2>Hello {{name}}</h2>
      <my-test [arg]="1"></my-test>
    `
    })
    export class App {
      constructor() {
       this.name = 'Angular2';
      } 
    }

测试 Plunker

消费者如何在Angular 2中提供组件构造函数参数？

3 个答案: