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

Posted 2023-02-22

【中文标题】Angular2，TypeScript，如何读取/绑定属性值到组件类（在 ngOnInit 中未定义）[重复]

【英文标题】：Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit) [duplicate]

【发布时间】：2016-06-08 06:31:18

【问题描述】：

有人可以建议我如何读取/绑定属性值到@component 类，这似乎在 ngOnInit 方法中未定义？

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

我想读取“someattribute”属性的值

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

在 App 类 (src/app.ts) ngOninit 方法中。

谢谢！

【参考方案1】：

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

Angular 2 input parameters on root directive

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

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

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

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

【讨论】：

抱歉，打错了。这也不行。请看plunker。

别担心！我更新了我的答案...问题是因为您尝试在应用程序的主要组件（用于引导它的组件）上使用它

是的！就是这样......我没有意识到我不能在根组件中使用属性。您能否删除答案中的“插值”部分并将部分保留在“代码”下方？只是为了避免像我这样的用户混淆。

这是一个坏主意，因为 API 中提到的安全漏洞和与 DOM 的耦合。 angular.io/docs/js/latest/api/core/index/ElementRef-class.html 使用 @Input 装饰器

安全风险与 DOM 操作有关。如果您进一步阅读安全指南 (angular.io/guide/…)，则 ElementRef 的 document 节点具有不安全的方法。简单地从 DOM 元素中读取属性并不是继承安全风险。您还可以使用第三方库，例如 StencilJS，它支持在组件上创建自定义属性：stenciljs.com/docs/properties

【参考方案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>

【讨论】：

如果不在根元素上使用，这比读取 getAttribute 要好得多

这是必须接受的答案。获取属性的正确方法。

这个答案没有解决在根组件上创建自定义属性的问题。虽然此解决方案是用于父/子组件属性绑定的文件，但可接受的答案对于场景（根组件）是正确的。

【参考方案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"