访问在 AngularJS 组件标签中声明的属性答案

【问题标题】：Access attributes declared inside an AngularJS component's tag访问在 AngularJS 组件标签中声明的属性
【发布时间】：2018-08-30 17:35:12
【问题描述】：

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

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

然后我想从我的控制器内部获取这个属性的值 (my-attr)。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

属性应该在bindings中声明：

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

属性的名称被规范化为camelCase，并且该值将作为属性设置在控制器实例上。所以你可能想在你的控制器类型上相应地声明它：

class MyComponentController
{
    myAttr: string;

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

【讨论】：

感谢您的快速答复。我不确定我可以用 TypeScript 做到这一点，似乎我需要在构造函数中声明绑定，这对我来说很复杂，而且我不知道之后如何引用这个属性。例如，以下将不起作用... ``` constructor() { this.bindings = { myAttr : '@' }; } 控制台.log(this.myAttr); ```
绑定必须在组件声明期间定义，因为它们需要由 Angular 解析器进行评估。
好的，确实有道理。然后你会如何提及这个？例如从控制器打印它的值？
正如您通过访问this.myAttr 所写的那样。正如答案中提到的，您当然必须将 myAttr 声明为您班级的属性。为清楚起见，编辑了答案。（如果使用严格的 TS 选项，可能会出错。）