javascript - How does consumer supply component constructor parameters in Angular 2? - Stack Overflow

admin管理员组

文章数量:1384760

I want to modify the field of a ponent instance. For example, in testponent.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 ponent constructor argument from a consumer's point of view, such that the value of "temp" and "temp2" are set at constructing time?

Thanks!

I want to modify the field of a ponent instance. For example, in test.ponent.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 ponent constructor argument from a consumer's point of view, such that the value of "temp" and "temp2" are set at constructing time?

Thanks!

• javascript
• angularjs
• typescript
• angular

Share Improve this question Follow edited Mar 19, 2016 at 5:03 lys1030 asked Mar 19, 2016 at 4:02 lys1030lys1030 28311 gold badge55 silver badges1717 bronze badges 1

• but what is arg? can you provide plunk? – micronyks Commented Mar 19, 2016 at 5:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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

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

So you can't use the constructor for the temp property because the ponent 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

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

I think the answer Thierry Templier explains your problem, but

you say in a ment:

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

本文标签： javascriptHow does consumer supply component constructor parameters in Angular 2Stack Overflow