Angular 1.5组件主机元素属性

Question

我希望能够在Angular 1.5组件的主机元素上设置自定义属性。

为什么？

• 我想在组件中添加一个类，以便我可以设置它的样式。 例如，如果组件的父级具有display: flex set，我可能希望在组件上设置flex属性。
• 根据组件的状态有条件地应用类通常很有用。
• 在某些情况下，我想使用ARIA属性来使组件更易于访问。

这是我想要做的简化示例（它显然不起作用，但我正在寻找类似的东西）：

angular.module("app").component('hello', {

  attributes() {
    return {
      class: "hello " + (this.greeting ? "hello--visibile" : ""),
      data-greeting: this.greeting
    }
  },

  bindings: {
    greeting: "<",
  }
})

看起来Angular 2.0 支持这个功能 ，但我没有在文档中看到有关在1.5中支持它的任何内容。 有没有办法实现这一点，我们仍然坚持使用.component ？

在过去，我会简单地使用replace: true来解决这个问题，但是这个问题已被弃用，甚至不能用于.component 。

Answer 1

如你所述，正如你所描述的那样，它不可能直接实现。 属性属性将是有用的，但尚未存在。

可能的解决方法是在控制器中使用$element 。 这会将jQuery元素作为依赖项传递，因此您可以根据需要添加属性。

angular
    .module('myComponent', [])
    .component('myComponent', {
        bindings: {
                greeting: '<'
        },
        controller: function($element) {
                $element.addClass('hello-world');
                $element.attr('aria-hidden', true);
                $element.data('my-greeting', this.greeting);
        },
        template: 'Define your template here.'
    });

<myComponent>元素现在将具有hello-world类和aria-hidden属性。 甚至可以使用绑定，如上所述的greeting 。

角度组件定义只是普通指令的包装 。