如何使用多个选择器定义Angular 2组件或指令

Question

目标:

为我的应用程序中的组件和指令提供"同义词"选择器.

动机:

有时,组件或指令提供可以以不同方式考虑的功能,而选择器的名称应有意义地表示或简化组件或指令如何操作的思考(名称是助记设备).

研究:

指令

我曾观察到,材料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

---

list.ts我找到的Material 2 CSS选择器的逗号语法表明它们适用于多种情况 - 我对这些选择器正在做的评估是:

1. class MdList适用于md-list和md-nav-list元素
2. class MdListItem适用于具有属性的元素md-list-item和a元素md-list-item

组件

从Angular 2 Architecture Overview页面:

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

selector:CSS选择器,它告诉Angular创建并插入此组件的实例,它<hero-list>在父HTML中找到标记.例如,如果应用程序的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跨越多个元素的 or 选择器。与,可使用分开的多个选择器，其中组件被添加到这些元素的匹配，其中一个。
许多 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]'