如何使用多个选择器定义 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