angular - Angular2, TypeScript, Wie liest man/Bindet man einen Attributwert an eine Komponentenklasse (undefiniert in ngOnInit)

Kann mir bitte jemand erklären, wie man einen Attributwert an eine @Component-Klasse liest/bindet, der in der ngOnInit-Methode anscheinend undefiniert ist?

Hier ist eine Plunker-Demo: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

Ich möchte den Wert des Attributs "someattribute" lesen

<my-app [someattribute]="'somevalue'">

innerhalb der App-Klasse (src/app.ts) ngOninit-Methode.

Danke!

Antwort #1

Sie können feststellen, dass solche Parameter nicht für die Root-Komponente verwendet werden können. Siehe diese Frage für weitere Details:

• Angular 2 Eingabeparameter beim Root-Directive

Die Umgehungslösung besteht darin, die ElementRef-Klasse zu nutzen. Sie muss in Ihre Hauptkomponente injiziert werden:

constructor(elm: ElementRef) {
  this.someattribute = elm.nativeElement.getAttribute('someattribute'); 
}

Wir müssen die Komponente auf diese Weise in der HTML-Datei verwenden:

<my-app someattribute="somevalue"></my-app>

Antwort #2

Sie sollten den @Input-Dekorator verwenden.

Dies ist ein Beispiel:

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

@Component({
    selector: 'user-menu',
    templateUrl: 'user-menu.component.html',
    styleUrls: ['user-menu.component.scss'],
})
export class UserMenuComponent {

    /**
     * userName Current username
     */
    @Input('userName') userName: string;

    constructor() {

    }
    sayMyName() {
        console.log('My name is', this.userName);
    }
}

Und es zu benutzen

<user-menu userName="John Doe"></user-menu>