Angular2，TypeScript，如何将属性值读取/绑定到组件类（在ngOnInit中未定义）

Question

请问有人能指导我如何将属性值绑定到@component类中，在ngOnInit方法中似乎未定义？

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

我想读取“someattribute”属性的值。

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

在App类（src/app.ts）的ngOnInit方法内。

谢谢！

- Tomino

Answer 1

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

• Angular 2中根指令上的输入参数

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

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

我们需要在HTML文件中这样使用组件：

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

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

- Thierry Templier

---

抱歉，这是一个打字错误。这个也不起作用。请查看Plunker。 - Tomino

没问题！我更新了我的答案... 问题是因为你试图在应用程序的主组件上使用它（你用来引导它的那个）。 - Thierry Templier

是的！就是这样...我没有意识到我不能在根组件中使用属性。你能否请删除您回答中“插值”部分，只保留下面的“代码”部分？这样可以避免像我这样的用户混淆。 - Tomino

这是一个糟糕的想法，因为API中已经指出了安全风险和与DOM的耦合。请使用@Input装饰器。https://angular.io/docs/js/latest/api/core/index/ElementRef-class.html - Michael Warner

安全风险涉及DOM操作。如果您进一步阅读安全指南（https://angular.io/guide/security#direct-use-of-the-dom-apis-and-explicit-sanitization-calls），它是ElementRef的`document`节点具有不安全的方法。仅从DOM元素中读取属性并不是继承安全风险。您还可以使用第三方库，例如StencilJS，它支持在组件上创建自定义属性：https://stenciljs.com/docs/properties - TheLandolorien

Answer 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>

- Germanaz0

---

这种方法比在根元素上读取getAttribute更好。 - darwin

这必须是被接受的答案。获取属性的正确方式。 - Rafique Mohammed

这个回答没有解决在一个根组件上创建自定义属性的问题。虽然这个解决方案适用于父/子组件属性绑定，但被接受的答案对于这种情况（根组件）是正确的。 - TheLandolorien

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

- Günter Zöchbauer