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

目标：

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

动机：

有时，组件或指令提供的功能可以用不同的方式来考虑，而选择器的名称应该有意义地表示或简化对组件或指令如何操作的思考（名称是一个助记符设备）

研究：

指令 我观察到，Material 2为其

MdList

和

MdListItem

指令提供了多个选择器：

从文档中的Angular 2属性指令页面：

@指令

需要CSS选择器来标识模板中的HTML 与我们的指令相关。属性的CSS选择器是 方括号中的属性名称。我们的指令的选择器是

[myHighlight]

。 Angular将定位模板中具有名为

myHighlight

哪些链接指向以下属性选择器MDN页面：

从Angular 2备忘页：

---

我找到的Material 2

list.ts

CSS选择器的逗号语法表明这些选择器适用于多种情况-我对这些选择器所做的评估如下：

class-MdList

适用于

md-list

和

md-nav-list

元素

class MdListItem

适用于具有

md列表项

属性的

md列表项

和

a

元素

组件 从Angular 2架构概述页面：

选择器：告诉Angular创建和插入实例的CSS选择器 在父HTML中找到一个

标记。对于 例如，如果应用程序的HTML包含

，则 在这些标记之间插入

HeroListComponent

视图的实例`

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

心智模型误解：

当我被介绍给Angular 2时，我“懒散地”将

选择器解释为应用程序
HTML
中表示的组件或指令的名称

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

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

经过研究和仔细研究（所有的文字）的文件，我已经意识到有更强大的东西在这里发生

一般问题：

我哪里弄错了上面的任何一个
我还缺少组件和指令选择器的哪些方面？e、 g.这里有更多的电力需要利用吗
具体问题：

组件能否具有元素属性选择器？如果是这样，行为/效果会是什么
在哪些情况下，您希望指令具有元素选择器
将指令应用于同义词CSS属性的语法是什么？e、 将指令应用于CSS属性选择器组中的任何一个
我哪里弄错了上面的任何一个

“懒散地”解释选择器

我不知道懒洋洋地解释选择器

如果在组件模板中找到与选择器或组件匹配的标记，则该标记将升级为角度组件。
如果使用
ViewContainerRef.createComponent（）
动态添加组件，则会将与选择器匹配的标记添加到DOM中，并将组件应用到DOM中

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

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

我还缺少组件和指令选择器的哪些方面？e、 g.这里有更多的电力需要利用吗

组件能否具有元素属性选择器？如果是这样，行为/效果会是什么

您可以使用自定义标记名、属性和CSS类以及它们的任意组合。不能使用
id
或跨多个元素的选择器。有了
，
可以使用分离的多个选择器，将组件添加到其中一个匹配的元素中。

许多Angulars内置指令使用选择器列表

在哪些情况下，您希望指令具有元素选择器

指令与组件相同，只是没有自己的视图

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

他们也会这样做

将指令应用于同义词CSS属性的语法是什么？e、 将指令应用于CSS属性选择器组中的任何一个

这不管用吗？我在这里学习——我不知道你说的“我在这里学习”是什么意思。你有问题吗？还是没有问题。这只是个问题吗？你真的试过了吗？好的-可能有问题-我有一个选择器
[vx左上]，[vx左上]
，用于匹配具有
vx左上
或
vx左上
属性的元素-当我定义/声明一个属性选择器时，它就工作了，但是当我同时定义/声明这两个元素时，Angular并没有找到我期望的元素。。。我的职位是保守派
@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 {
    ...
}

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

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