如何使用多個選擇器定義 Angular 2 組件或指令

Question

目標：

為我的應用程序中的組件和指令提供“同義詞”選擇器。

動機：

有時組件或指令提供可以以不同方式思考的功能，而選擇器的名稱應該有意義地表示或簡化對組件或指令如何操作的思考（名稱是助記符設備）。

研究：

指令

我觀察到 Material 2 為其MdList和MdListItem指令提供了似乎是多個選擇器：

https://github.com/angular/material2/blob/master/src/lib/list/list.ts

@Component({
  moduleId: module.id,
  selector: 'md-list, md-nav-list',
  host: {'role': 'list'},
  template: '<ng-content></ng-content>',
  styleUrls: ['list.css'],
  encapsulation: ViewEncapsulation.None
})
export class MdList {}

...和...

@Component({
  moduleId: module.id,
  selector: 'md-list-item, a[md-list-item]',
  host: {
    'role': 'listitem',
    '(focus)': '_handleFocus()',
    '(blur)': '_handleBlur()',
  },
  templateUrl: 'list-item.html',
  encapsulation: ViewEncapsulation.None
})
export class MdListItem implements AfterContentInit {
    ...
}

從文檔中的 Angular 2 屬性指令頁面：

https://angular.io/docs/ts/latest/guide/attribute-directives.html

@Directive需要一個 CSS 選擇器來標識模板中與我們的指令關聯的 HTML。 屬性的 CSS 選擇器是方括號中的屬性名稱。 我們指令的選擇器是[myHighlight] 。 Angular 將定位模板中具有名為myHighlight的屬性的所有元素。

哪些鏈接到以下屬性選擇器 MDN 頁面：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

從 Angular 2 Cheat Sheet 頁面：

https://angular.io/docs/js/latest/guide/cheatsheet.html

---

我發現的 Material 2 list.ts CSS 選擇器的逗號語法表明它們適用於多種情況 - 我對這些選擇器所做的評估是：

1. class MdList適用於md-list和md-nav-list元素
2. class MdListItem適用於md-list-item和具有md-list-item屬性a元素

成分

從 Angular 2 架構概覽頁面：

https://angular.io/docs/ts/latest/guide/architecture.html

選擇器：CSS 選擇器，它告訴 Angular 創建並插入此組件的實例，它在父 HTML 中找到<hero-list>標簽。 例如，如果應用程序的 HTML 包含<hero-list></hero-list> ，那么 Angular 會在這些標簽之間插入一個HeroListComponent視圖的實例。`

有趣的是，在野外，我沒有遇到任何具有多個選擇器的組件的示例。

心智模型的誤解：

當我被介紹到 Angular 2 時，我“懶惰地”將selectors解釋為應用程序HTML表示的組件或指令的名稱。

在我的（錯誤的）心智模型組件選擇器中，只有一種有效定義應用程序特定HTML元素的方法。

在我的（錯誤的）心理模型指令選擇器中，只有一種定義應用程序特定HTML元素屬性的方法，用於修改元素的行為。

完成研究並仔細研究（所有單詞）文檔后，我開始意識到這里有更強大的東西......

一般的問題：

1. 我哪里出錯了？
2. 我還缺少組件和指令選擇器的哪些其他方面？ 例如，這里是否有更多的權力可以利用？

具體問題：

1. 組件可以有元素屬性選擇器嗎？ 如果是這樣，行為/效果是什么？
2. 在哪些情況下您希望指令具有元素選擇器？
3. 將指令應用於同義詞 CSS 屬性的語法是什么？ 例如，將指令應用於一組 CSS 屬性選擇器中的任何一個...

Answer 1

我在哪里遇到上述任何錯誤？

“懶惰地”解釋了選擇者

我不知道懶惰的解釋選擇器。

如果在組件模板中找到與選擇器或組件匹配的標記，則會將其升級為Angular組件。 如果使用ViewContainerRef.createComponent() （如路由器那樣）動態添加組件，則將與選擇器匹配的標記添加到DOM並將組件應用於它。

在我的（錯誤的）心理模型組件選擇器中，其中只有一種有效定義特定於應用程序的HTML元素的方法。

選擇器用於將DOM元素與Angular的組件或指令進行匹配，以了解DOM的哪個部分應該成為組件或指令。

我錯過了組件和指令選擇器的哪些方面？ 例如，這里有更多的權力可以利用嗎？

組件可以有元素屬性選擇器嗎？ 如果是這樣，行為/效果會是什么？

您可以使用自定義標記名稱，屬性和CSS類以及這些類的任意組合。 您不能使用跨多個元素的id或選擇器。 使用,可以使用分離的多個選擇器，其中將組件添加到其中一個匹配的元素。
許多Angulars內置指令使用選擇器列表。

在哪種情況下，您希望指令具有元素選擇器？

指令與組件相同，只是沒有它自己的視圖。

<my-dropdown>
  <my-item></my-item>
  <my-item></my-item>
  <my-item></my-item>
</my-dropdown>

可以由像這樣的組件實現

@Component({
  selector: 'my-dropdown',
  template: '<ng-content></ng-content>'
})

要么

@Directive({
  selector: 'my-dropdown',
})

他們會做同樣的事情。

將指令應用於同義CSS屬性的語法是什么？ 例如，將指令應用於任何一組CSS屬性選擇器......

selector: '[attr1],[attr2],[attr3]'

Answer 2

非常直接的選擇來解決您的問題：

1. 創建描述沒有@Component裝飾器的組件的@Component
2. 創建擴展組件類的類
3. 將裝飾器放在它們上面
4. 重復2和3