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 。

角度組件定義只是普通指令的包裝 。