css - 如何使用多个选择器定义 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 requires a CSS selector to identify the HTML in the template that is associated with our directive. The CSS selector for an attribute is the attribute name in square brackets. Our directive's selector is [myHighlight]. Angular will locate all elements in the template that have an attribute named myHighlight.

哪些链接到以下属性选择器 MDN 页面:

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

来自 Angular 2 备忘单页面:

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和 a具有 md-list-item 的元素属性

组件

来自 Angular 2 架构概述页面:

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

selector: CSS selector that tells Angular to create and insert an instance of this component where it finds a <hero-list> tag in parent HTML. For example, if an app's HTML contains <hero-list></hero-list>, then Angular inserts an instance of the HeroListComponent view between those tags.`

有趣的是，在野外，我还没有遇到任何具有多个选择器的组件示例。

心智模型误解:

当我被介绍给 Angular 2 时，我“懒洋洋地”解释了 selectors仅作为应用程序中表示的组件或指令的名称 HTML .

在我的(错误的)心智模型组件选择器中，只有一种有效定义应用程序特定的方法 HTML元素。

在我的(错误的)心智模型指令选择器中，只有一种方法可以定义应用程序特定的 HTML用于修改元素行为的元素属性。

在完成研究并仔细研究(所有文字)文档后，我开始意识到这里有一些更强大的东西......

一般问题:

1. 以上我哪里做错了？
2. 我还缺少组件和指令选择器的哪些其他方面？例如这里有更多的力量可以利用吗？

具体问题:

1. 组件可以有元素属性选择器吗？如果是这样，行为/效果会是什么？
2. 在哪些情况下您希望指令具有元素选择器？
3. 将指令应用于同义词 CSS 属性的语法是什么？例如将指令应用于一组 CSS 属性选择器中的任何一个...

Answer 1

Where have I got any of the above wrong?

"lazily" interpreted selectors

我不知道惰性解释选择器。

如果在组件模板中找到与选择器或组件匹配的标签，则将其升级为 Angular 组件。 如果使用 ViewContainerRef.createComponent()(就像路由器所做的那样)动态添加组件，则会将与选择器匹配的标记添加到 DOM 并将组件应用到它。

In my (faulty) mental model component selectors where only a way of effectively defining an application specific HTML element.

选择器用于将 DOM 元素与组件或指令相匹配，以便 Angular 知道 DOM 的哪一部分应该成为组件或指令。

What other aspects of component and directive selectors am I missing? e.g. is there more power to be harnessed here?

Can a component have element attribute selector? and if so, what would the behavior/effect be?

您可以使用自定义标记名称、属性和 CSS 类以及它们的任意组合。您不能使用 id 或跨越多个元素的选择器。使用 , 分隔的多个选择器可以用于将组件添加到其中一个匹配的元素。
许多 Angulars 内置指令使用选择器列表。

In which situations would you want a directive to have an element selector?

指令与组件相同，只是没有自己的 View 。

<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',
})

他们会做同样的事情。

What's the syntax to apply a directive to synonym CSS attributes? e.g. apply a directive to any of a group of CSS attribute selectors...

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