アングル2コンポーネントをアトリビュートセレクタとともに使用できますか？

Question

現在、オンサイトSharepoint 2013環境で使用されている既存の小さなAngular 1プロジェクトがあります。私たちのコンテンツの大部分については、Sharepoint環境で公開ページを使用しています。

角度1の場合、属性名、タグ名、コメント、またはクラス名に制限するようにディレクティブを定義できます。作成したディレクティブのほとんどは、属性またはタグ名でした。選好はタグ名だったが、Sharepointの出版プラットフォームはを知らずに要素を取り除く。つまり、私たちの指示を公開ページに持ち込むために、属性を使用して残したということです。しかしAngular 2では、タグ名で実装されたコンポーネントしか見ていませんでした。

Angular 2では、コンポーネントを使用するために属性名を使用できますか？これは、Sharepoint発行プラットフォームの制限のために私たちの要件です。

ありがとうございました。

Answer 1

はい、@ComponentデコレータのselectorプロパティがCSS selector（またはサブセット）である：

selector：'.cool-button:not(a)'

は、テンプレート内このディレクティブを特定するCSSセレクタを指定します。 サポートされるセレクタには、element,[attribute],.classおよび:not()が含まれます。
はありませんは親子関係セレクタをサポートしています。

_{出典：@Component継承Angular Cheat Sheet/Directive Configuration、。}

あなたのような、[name-of-the-attribute]（すなわち、CSS attribute selector）を使用することができますこの方法：

@Component({ 
    selector: "[other-attr]", 
    ... 
}) 
export class OtherAttrComponent { 

Seをdemo plunker here。

通常の方法はCSS type (AKA element or tag) selectorです：

@Component({ 
    selector: "some-tag", 
    ... 
}) 

そして、それは名前some-tagでタグに一致します。

あなたもboth a tag or an attributeに一致するコンポーネントを持つことができます。

@Component({ 
    selector: "other-both,[other-both]", 
    template: `this is other-both ({{ value }})` 
}) 
export class OtherBothComponent { 

Demo plunkerは、すべての3つの例が含まれています。

[attributeName="attributeValue"]はサポートされていますか？

はい。しかし、引用符に気をつけてください。現在の実装では、セレクタ[attributeName="attributeValue"]は実際には<sometag attributeName='"attributeValue"'>と一致していますので、このアプローチを行う前にテストしてください。

Answer 2

はい、これに従ってhttps://angular.io/docs/ts/latest/guide/cheatsheet.html（コンポーネントと指令は一般的に非常に似ています）。絶対に

<div custom-attribute-name></div> 

Answer 3

：

selector: 'custom-element-name' 

用途：

selector: '[custom-attribute-name]' 

そして、あなたの親コンポーネントのテンプレート内の代わりに要素のセレクターを使用します。あなたが使用する必要がある場合は、単にこれを行う属性のように、基本的にこれは、単にCSSセレクタです：

@Component({ 
    selector: "my-tag[with-my-attribute]" 
}) 

Answer 4

@Componentデコレータ支持、要素セレクタ、属性セレクタとクラスセレクタのセレクタプロパティ：

1要素セレクター：

@Component({ 
selector: 'custom-element-name' 
}) 

用途：<app-servers></app-servers>

2属性セレクタ：

@Component({ 
selector: '[custom-element-name]' 
}) 

用途：<div app-servers></div>

3クラスセレクター：

@Component({ 
selector: '.custom-element-name' 
}) 

用途：<div class="app-servers"></div>

注：角度2は、ID及びPSEUDをサポートしていませんoセレクタ