角度1.5コンポーネントホスト要素の属性

Question

角度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でも利用できません。

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です。