Angular 1.5 组件宿主元素属性

Question

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

为什么？

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

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

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

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

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

它看起来像 Angular 2.0 supports this feature，但我在文档中没有看到任何关于在 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 所述。

角度组件定义为just a wrapper around normal directives。