Angular 1.5組件主機元素屬性

我希望能夠爲Angular 1.5組件的主機元素設置自定義屬性。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: "<", 
    } 
})

它看起來像角2.0 supports this feature，但在文檔中我沒有看到1.5中支持它的任何內容。有沒有辦法做到這一點，我們這些人仍然堅持使用.component？

過去，我只是簡單地使用replace: true來解決這個問題，但是這已被棄用，甚至不可用於.component。

來源

2016-06-17 LandonSchropp

。組件不是用於dom操作的。如果你想控制html元素，你應該使用一個指令，而不是（鏈接功能） – gyc

正如你所說，它不是直接可能的，因爲你描述。屬性屬性將是有用的，但目前還不存在。

可能的解決方法是在控制器內部使用$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。

來源

2016-06-22 08:33:03

感謝您的答覆！我沒有意識到我可以訪問組件內部的'$ element'。我可能會寫一個快速的可重用的助手來抓取我的屬性並將其附加到元素。 – LandonSchropp

讓我們假設你在一個項目的所有組件上使用這個。有什麼缺點嗎？也許一些性能損失？ – Mackelito

如何動態設置主機元素樣式（例如寬度或高度）？ – Mikemike

Angular 1.5組件主機元素屬性

回答

相關問題