How does consumer supply component constructor parameters in Angular 2?

Question

I want to modify the field of a component instance. For example, in test.component.ts:

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

I want to set the values of temp and temp2 using the constructor. I know one approach is to use input property by doing something like:

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

However, this is done after the constructing time and temp2 won't change accordingly. How can I supply component constructor argument from a consumer's point of view, such that the value of "temp" and "temp2" are set at constructing time?

Thanks!

but what is `arg`? can you provide plunk? – micronyks Mar 19 '16 at 05:11 — micronyks, Mar 19 '16 at 05:11

score 4 · Accepted Answer · edited May 23 '17 at 11:46

In fact inputs of a component are only available from the ngOnInit method because of the component lifecycle:

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

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

Moreover we can only use parameters in the component constructor that are provided through dependency injection.

So you can't use the constructor for the temp property because the component lifecycle. Regarding it depends on how you make it available. If it's through dependency injection, it will work but you need to use the @Inject decorator to specify what to inject.

You could also have a look at this question for more details:

Difference between Constructor and ngOnInit

score 0 · Answer 2 · answered Mar 19 '16 at 04:26

0

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
    }
}

answered Mar 19 '16 at 04:26

micronyks

54,797
15
112
146

thank you for your quick reply! Service is a good idea, but is it possible to supply the argument in the html, for example, or Angular2, such that a consumer can supply the argument easily? – lys1030 Mar 19 '16 at 04:35
AFAIK `` `temp` can be used freely in `test` cmp...You dont need to inject it. I dont understand your context fully... – micronyks Mar 19 '16 at 04:38
In the case where there is another instance var temp2 of test cmp associated with temp (for example, temp2 = temp * 2; ), using @Input() to change temp wont't change the value of temp2. Therefore, I want to supply argument during constructing. – lys1030 Mar 19 '16 at 04:51
of course It will change temp2 if you change temp ! – micronyks Mar 19 '16 at 04:55
In case you don't fully understand my context, I updated the question, hope this can be more clear. By using input property, I can only change temp, but temp2 will not update accordingly. (I've tried) – lys1030 Mar 19 '16 at 05:03

score 0 · Answer 3 · edited May 23 '17 at 11:54

I think the answer Thierry Templier explains your problem, but

you say in a comment:

I updated the question, hope this can be more clear. By using input property, I can only change temp, but temp2 will not update accordingly.

I hope this is what you want to achieve and help you.

    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';
      } 
    }

test Plunker

How does consumer supply component constructor parameters in Angular 2?

3 Answers3