@Input() Wert ist immer undefiniert

Question

Ich habe eine user photo component erstellt, die einen @Input() Wert annimmt, dieser Wert ist die userId. Wenn der Wert übergeben wird, dann erhalte ich Informationen von Firebase Verknüpfung zu dieser userId, wenn es nicht tut, dann mache ich etwas anderes.

Meine User-Foto Komponente

import { Component, OnInit, OnDestroy, Input } from '@angular/core'; 

@Component({ 
    selector: 'user-photos', 
    templateUrl: './user-photos.component.html', 
    styleUrls: ['./user-photos.component.css'] 
}) 

export class UserPhotoComponent implements OnInit { 

    @Input() userId: string; 

    constructor() { 

     console.log('userId is:',this.userId); 

    } 


    ngOnInit() { 


    } 

    ngOnDestroy() { 

    } 
} 

Wie man sehen kann ich die userId als @Input() erklärt haben, jetzt auf meinem edit-profile component ich habe folgendes:

<user-photos [userId]="TestingInput"></user-photos> 

Nun ist die User-Foto Komponente bekommt gerendert, wie ich das h1 Tag erscheint, aber die userId ist immer undefiniert?

In der Entwicklerkonsole werden keine Fehler angezeigt, daher bin ich mir nicht ganz sicher, was ich falsch gemacht habe.

Answer 1

Es wird in ngOnInit initialisiert, nicht der Konstruktor. (Bitte beachten Sie auch die Angular Life Cycle Hooks documentation überprüfen.)

ngOnInit() { 
    console.log('userId is:',this.userId); 
} 

Auch wenn Sie eine wörtliche wie ein String übergeben wollen und Klammern verwenden [] Sie es als eine Zeichenfolge übergeben müssen, indem Sie den Wert mit einzelnen Ticks umschließt.

<user-photos [userId]="'TestingInput'"></user-photos> 

Der Grund dafür ist der umschließende Ausdruck wird im Rahmen der enthaltenden Komponente ausgewertet so ohne sie wird es versuchen, eine Eigenschaft/Feld TestingInput Namen abrufen und übergibt, die (, wenn Sie auch passieren undefiniert werden habe ein Feld mit diesem Namen).