Question

目标：

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

动机：

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

研究

指令

我观察到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选择器的逗号语法表明这些适用于多种情况 - 我对这些选择器正在做的评估是：

class MdList适用于md-list和md-nav-list元素
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创建和插入实例该组件在父HTML中找到<hero-list>标记的位置。对于例如，如果应用的HTML包含<hero-list></hero-list>，则为Angular 在这些标记之间插入HeroListComponent视图的实例。

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

心理模型误解：

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

在我的（有缺陷的）心理模型组件选择器中，只有一种方法可以有效地定义特定于应用程序的HTML元素。

在我的（有缺陷的）mental model指令选择器中，只有一种方法可以定义一个特定于应用程序的HTML元素属性，用于修改元素的行为。

完成了研究并仔细研究了文档中的所有文字后，我逐渐意识到这里有更强大的东西......

一般问题：

我在哪里遇到上述任何错误？
我缺少组件和指令选择器的哪些方面？例如这里有更多权力可以利用吗？

具体问题：

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

Answer 1

我在哪里遇到上述任何错误？

＆＃34;懒惰地＆＃34;解释选择器

我不知道懒惰的解释选择器。

如果在组件模板中找到与选择器或组件匹配的标记，则会将其升级为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

解决问题的直接选择：

创建描述没有@Component装饰器
创建扩展组件类的类
将装饰器放在上面
重复2和3

如何使用多个选择器

指令

部件

2 个答案: