Wie liefert der Kunde Komponentenkomponenten in Angular 2?

Question

Ich möchte das Feld einer Komponenteninstanz ändern. Zum Beispiel in test.component.ts:

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

Ich möchte die Werte der Temperatur und TEMP2, um den Konstruktor. Ich weiß, dass ein Ansatz ist durch Eingabe Eigenschaft nutzen, um etwas wie tun:

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

Dies ist jedoch nach der Konstruktion von Zeit getan und TEMP2 wird nicht entsprechend ändern. Wie kann ich ein Komponentenkonstruktorargument aus der Sicht eines Verbrauchers liefern, so dass der Wert von "temp" und "temp2" zur Konstruktionszeit gesetzt wird?

Danke!

Answer 1

Tatsächlich Eingänge eines Bauteils sind nur vom ngOnInit Verfahren zur Verfügung, da der Komponentenlebenszyklus:

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

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

Darüber hinaus können wir nur Parameter im Komponentenkonstruktor verwenden, die über die Abhängigkeitsinjektion bereitgestellt werden.

Sie können den Konstruktor nicht für die Eigenschaft temp als Lebenszyklus der Komponente verwenden. Es hängt davon ab, wie Sie es zur Verfügung stellen. Wenn es durch die Abhängigkeitsinjektion erfolgt, wird es funktionieren, aber Sie müssen den @Inject Decorator verwenden, um festzulegen, was injiziert werden soll.

Sie auch einen Blick auf diese Frage, um weitere Informationen haben könnte:

• 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

Ich denke, die answer Thierry Templier erklärt Ihr Problem, aber

Sie sagen, in einem Kommentar:

Ich habe die Frage aktualisiert, hoffe, das kann m sein Erz klar. Durch Verwendung der Eingabe Eigenschaft kann ich nur die Temperatur ändern, aber temp2 wird nicht entsprechend aktualisieren.

Ich hoffe, das ist das, was Sie erreichen wollen und Ihnen helfen.

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