Angular 2: Zrób coś z @ Input wewnątrz Component

Question

Jak mogę coś zrobić z wartością @ Input w komponencie?

Na przykład:

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

Załóżmy, że user jest obiektem. Teraz wiem, w jaki sposób mogę przekazać te dane użytkownika wewnątrz szablonu log użytkownika, ale jak mogę zrobić coś z tym user wewnątrz jego komponentu?

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

Każda pomoc będzie wielki !! Z góry dziękuję!

Answer 1

W czasie budowy wartość @Input nie jest jeszcze ustawiona. W jaki sposób Angular2 może ustawić wartość @Input przed utworzeniem komponentu?

Musisz poczekać na zainicjowanie komponentu; co oznacza, że ​​wszystkie wartości @Input zostały ustawione. Możesz to zrobić, implementując interfejs OnInit.

Tak, aby naprawić swój przykład:

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

^{(Uwaga: user musi być określony przedmiot, poza tym przykładzie nieokreślonej nadal będzie zalogowany Możesz dodać *ngIf="user" do znacznika log-user html, aby zapewnić. tag nie zostanie wygenerowana przed user faktycznie istnieje)}

zrobić:.

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

Można również po prostu utworzyć metodę ngOnInit na swoim komponencie bez implementowania interfejsu, ale poprzez zaimportowanie interfejsu OnInit użytkownik upewni się, że kompilator Typescript nie popełnił pomyłki.

W Angular docs about OnInit stany:

implementować ten interfejs do wykonywania logiki zwyczaj po inicjalizacji właściwości danych związana Twojego dyrektywy zostały zainicjowane.

ngOnInit jest wywoływana zaraz po tym, jak właściwości danych związanych z dyrektywą zostały sprawdzone po raz pierwszy i zanim któreś z jego dzieci zostały sprawdzone. . Jest wywoływany tylko jeden raz, gdy zostanie utworzona dyrektywa w postaci .

Answer 2

Po dalszych badaniach znalazłem ten wpis "@Input property is undefined in angular 2's onInit".

Odpowiedź jest prosta. Ponieważ w tym przykładzie obiekt user jest obiektem pochodzącym z wywołania interfejsu API, jest on niezdefiniowany podczas inicjowania komponentu (mam nadzieję, że mówię to w odpowiedni sposób).Korzystanie *ngIf poprawki to:

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

Answer 3

Ponieważ nasze kątowe elementy są zajęcia ES6 z @Component() dekoratora jesteśmy w stanie wykorzystać akcesorów TS przechwycić wartość wtryskiwanego następująco:

Głównym Różnica polega na tym, że zamiast ozdabiać nieruchomość dekorujemy setera.

Więcej szczegółów http://www.typescriptlang.org/docs/handbook/classes.html

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

Wewnątrz 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() { 

    } 
}