在AngularJS组件的标记内声明的访问属性

Question

我想在组件的HTML标记中声明一个属性并为其赋值，如下所示：

<my-component my-attr="foo"></my-component>

然后我想从我的控制器中获取此属性（my-attr）的值。

这是否可以使用AngularJS 1.6和TypeScript，如果是，如何？

Answer 1

定义组件时，将myAttr声明为组件的绑定。这样它的值就会成为控制器的一部分。

Answer 2

该属性应在bindings：

中声明

app.component('myComponent', {
  ...
  bindings: {
    myAttr: '@'
  }
});

（绑定类型：What is the difference between '@' and '=' in directive scope in AngularJS?）

该属性的名称规范化为camelCase，该值将作为属性在控制器实例上设置。因此，您可能希望在控制器类型上相应地声明它：

class MyComponentController
{
    myAttr: string;

    logAttribute()
    {
        console.log(this.myAttr);
    }
}