angular - Angular2, TypeScript, Bileşen sınıfına öznitelik değerini nasıl okunur/bağlanır (ngOnInit içinde tanımsız)

Biri bana, ngOnInit metodunda tanımsız gibi görünen @component sınıfına nasıl attribute değeri okunur/bağlanır, lütfen tavsiye edebilir mi?

İşte bir plunker demosu: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

“someattribute” özniteliğinin değerini okumak istiyorum

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

App sınıfının (src/app.ts) ngOninit metodunun içinde.

Teşekkürler!

Cevap #1

Bunun gibi parametrelerin kök bileşen için kullanılamayacağını fark edebilirsiniz. Daha fazla detay için bu soruya bakın:

  • Kök direktifte Angular 2 giriş parametreleri

Bu geçici çözüm, ElementRef sınıfını kullanmayı içerir. Bunun ana bileşeninize enjekte edilmesi gerekir:

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

HTML dosyasında bileşeni bu şekilde kullanmamız gerekiyor:

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

Cevap #2

@Input dekoratörünü kullanmalısınız.

Bu bir örnektir:

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

Ve kullanmak için

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

İlgili makaleler