Angular2, TypeScript, Как читать/привязывать значение атрибута к классу компонента (undefined в ngOnInit)

Может кто-нибудь, пожалуйста, посоветуйте мне, как читать/связывать значение атрибута с классом @component, который, кажется, undefined в методе ngOnInit?

Здесь демоверсия плункера: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

Я хотел бы прочитать значение атрибута "someattribute"

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

внутри класса приложения (src/app.ts) ngOninit.

Спасибо!

Ответ 1

Вы можете заметить, что такие параметры нельзя использовать для корневого компонента. См. Этот вопрос для получения дополнительной информации:

Angular 2 входных параметра в корневой директиве

Обходной путь заключается в использовании класса ElementRef. Он должен быть введен в ваш основной компонент:

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

Нам нужно использовать компонент таким образом в файле HTML:

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

Ответ 2

Вы должны использовать декоратор @Input.

Это пример:

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

И использовать его

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

Ответ 3

Обновление

В корневом компоненте входы не поддерживаются в качестве обходного пути, который вы можете использовать

constructor(elementRef:ElementRef) {
  console.log(elementRef.nativeElement.getAttribute('someattribute');
}

См. также https://github.com/angular/angular/issues/1858

См. также фиксированный Plunker

оригинальный

Вам нужно либо использовать

[property]="value"

или

property="{{value}}"

или если это атрибут

[attr.property]="value"

или

attr.property="{{value}}"