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。

Angular 1.5组件主机元素属性

1 个答案: