Angolare 2: fare qualcosa con @Input all'interno del componente

Question

Come posso fare qualcosa con il valore @Input all'interno del componente ??

Ad esempio:

<log-user [user]="user"></log-user> 

Supponiamo che user è un oggetto. Ora, so come posso trasferire questi dati utente all'interno del modello di log-user, ma come posso fare qualcosa con questo user all'interno del suo componente ??

LogUserComponent:

@Component({ 
    selector: 'log-user', 
    template: ` 

    This works: {{user}} 

    ` 
}) 

export class LogUserComponent { 

    @Input() user:any; 

    constructor() { 
    // this get's logged as undefined?? 
    console.log(this.user); 
    } 
} 

Qualsiasi aiuto sarebbe grande !! Grazie in anticipo!

Answer 1

In fase di costruzione il valore @Input non è ancora impostato. In che modo Angular2 ha impostato il valore @Input prima che il componente fosse effettivamente costruito?

È necessario attendere l'inizializzazione del componente; ovvero tutti i valori @Input sono stati impostati. È possibile farlo implementando l'interfaccia OnInit.

Quindi, per risolvere il tuo esempio:

<log-user [user]="user"></log-user> 

^{(Nota: user deve essere un oggetto definito, tuttavia in questo esempio indefinita sarebbe ancora essere registrato È possibile aggiungere *ngIf="user" al tag log-user html per garantire. il tag non viene reso prima user esiste realmente)}

Do:.

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

@Component({ 
    selector: 'log-user', 
    template: `This works: {{user}}` 
}) 
export class LogUserComponent implements OnInit { 

    @Input() user:any; 

    ngOnInit() { 
    // this now gets logged as 'user' 
    console.log(this.user); 
    } 
} 

È anche possibile creare il metodo ngOnInit sul componente senza implementare l'interfaccia, ma importando l'interfaccia OnInit si garantisce che il compilatore Typescript non commetta errori di battitura.

I Angular docs about OnInit stati:

implementare questa interfaccia per eseguire logica di inizializzazione personalizzato dopo proprietà con associazione a dati vostra di direttiva sono stati inizializzati.

ngOnInit viene chiamato a destra dopo che le proprietà di data associate ai dati della direttiva sono state controllate per la prima volta e prima che uno dei suoi figli sia stato controllato. Viene richiamato una sola volta quando la direttiva è istanziata.

Answer 2

Dopo alcune ricerche, ho trovato questo post "@Input property is undefined in angular 2's onInit".

Quindi la risposta è in realtà abbastanza semplice. Poiché in questo esempio lo user è un oggetto proveniente da una chiamata API, non è definito all'inizializzazione del componente (spero di dirlo nel modo giusto).Utilizzando *ngIf consente la correzione:

<log-user *ngIf="user" [user]="user"></log-user>

Answer 3

Dato che i nostri componenti angolari sono classi ES6 con un() decoratrice @Component siamo in grado di sfruttare funzioni di accesso TS per intercettare il valore iniettato nel seguente modo:

Il principale la differenza è che invece di decorare la proprietà decoriamo il setter.

Maggiori dettagli http://www.typescriptlang.org/docs/handbook/classes.html

<log-user [user]="user"></log-user> 

All'interno Component.ts

export class LogUserComponent { 
    private _user:any; 

    get user() { 
    return this._user; 
    } 
    @Input() 
    set user(user:any) { 
    // to catch undefined user 
    if(!user) return; 
    this._user = user; 
    // modify the user here example below 
    // this._user = 'X' + user; 
    } 

    constructor() { 

    } 
}