请问有人能指导我如何将属性值绑定到@component类中,在ngOnInit方法中似乎未定义?
这是一个Plunker演示: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview
我想读取“someattribute”属性的值。
<my-app [someattribute]="'somevalue'">
在App类(src/app.ts)的ngOnInit方法内。谢谢!
请问有人能指导我如何将属性值绑定到@component类中,在ngOnInit方法中似乎未定义?
这是一个Plunker演示: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview
我想读取“someattribute”属性的值。
<my-app [someattribute]="'somevalue'">
在App类(src/app.ts)的ngOnInit方法内。您可以注意到,这些参数不能用于根组件。有关详细信息,请参见此问题:
解决方法是利用ElementRef
类。它需要注入到您的主要组件中:
constructor(elm: ElementRef) {
this.someattribute = elm.nativeElement.getAttribute('someattribute');
}
我们需要在HTML文件中这样使用组件: 我们需要在 HTML 文件中以这种方式使用组件:
<my-app someattribute="somevalue"></my-app>
你应该使用 @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>
更新
根组件不支持输入,作为解决方法,您可以使用:
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}}"