Angular2，TypeScript，如何 read/bind 属性值到组件 class（在 ngOnInit 中未定义）

Question

有人可以告诉我如何 read/bind 属性值到@component class，这似乎在 ngOnInit 方法中未定义吗？

这是一个 plunker 演示： http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

我想读取 "someattribute" 属性的值

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

应用程序内部 class (src/app.ts) ngOninit 方法。

谢谢！

Answer 1

您可以注意到此类参数不能用于根组件。有关详细信息，请参阅此问题：

解决方法是利用 ElementRef class。它需要被注入到你的主要组件中：

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

我们需要在 HTML 文件中以这种方式使用组件：

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

Answer 2

更新

输入在根组件中不受支持，作为解决方法您可以使用

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}}"

Answer 3

你应该使用 @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>

Angular2，TypeScript，如何 read/bind 属性值到组件 class（在 ngOnInit 中未定义）

Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit)

typescript

angular2-directives

angular2-template

angular