[英]How to define an Angular 2 component or directive with multiple selectors
Goal:目标:
Provide 'synonym' selectors for components and directives within my application.为我的应用程序中的组件和指令提供“同义词”选择器。
Motivation:动机:
There are times where a component or directive provides functionality that can be thought of in different ways whereas the name of the selector should meaningfully represent or simplify thinking about how the component or directive operates (the name being a mnemonic device).有时组件或指令提供可以以不同方式思考的功能,而选择器的名称应该有意义地表示或简化对组件或指令如何操作的思考(名称是助记符设备)。
Research:研究:
I had observed that Material 2 provides what seemed to be multiple selectors for its MdList
and MdListItem
directives:我观察到 Material 2 为其
MdList
和MdListItem
指令提供了似乎是多个选择器:
https://github.com/angular/material2/blob/master/src/lib/list/list.ts 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 {}
...and... ...和...
@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 {
...
}
From the Angular 2 attribute directives page in the documentation:从文档中的 Angular 2 属性指令页面:
https://angular.io/docs/ts/latest/guide/attribute-directives.html 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.@Directive
需要一个 CSS 选择器来标识模板中与我们的指令关联的 HTML。 The CSS selector for an attribute is the attribute name in square brackets.属性的 CSS 选择器是方括号中的属性名称。 Our directive's selector is
[myHighlight]
.我们指令的选择器是
[myHighlight]
。 Angular will locate all elements in the template that have an attribute namedmyHighlight
.Angular 将定位模板中具有名为
myHighlight
的属性的所有元素。
Which links to the following attribute selectors MDN page:哪些链接到以下属性选择器 MDN 页面:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
From the Angular 2 Cheat Sheet page:从 Angular 2 Cheat Sheet 页面:
https://angular.io/docs/js/latest/guide/cheatsheet.html https://angular.io/docs/js/latest/guide/cheatsheet.html
The comma syntax of the Material 2 list.ts
CSS selectors that I found, suggests that these apply to multiple situations - my evaluation of what these selectors are doing is:我发现的 Material 2
list.ts
CSS 选择器的逗号语法表明它们适用于多种情况 - 我对这些选择器所做的评估是:
class MdList
applies to md-list
and md-nav-list
elements class MdList
适用于md-list
和md-nav-list
元素class MdListItem
applies to md-list-item
and a
elements that have a md-list-item
attribute class MdListItem
适用于md-list-item
和具有md-list-item
属性a
元素From the Angular 2 Architecture Overview page:从 Angular 2 架构概览页面:
https://angular.io/docs/ts/latest/guide/architecture.html 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.选择器:CSS 选择器,它告诉 Angular 创建并插入此组件的实例,它在父 HTML 中找到
<hero-list>
标签。 For example, if an app's HTML contains<hero-list></hero-list>
, then Angular inserts an instance of theHeroListComponent
view between those tags.`例如,如果应用程序的 HTML 包含
<hero-list></hero-list>
,那么 Angular 会在这些标签之间插入一个HeroListComponent
视图的实例。`
Interestingly, in the wild, I have not come across any example of a component that has multiple selectors.有趣的是,在野外,我没有遇到任何具有多个选择器的组件的示例。
Mental Model Misconceptions:心智模型的误解:
When I was introduced to Angular 2 I "lazily" interpreted selectors
merely as the name of the component or directive as represented within the application HTML
.当我被介绍到 Angular 2 时,我“懒惰地”将
selectors
解释为应用程序HTML
表示的组件或指令的名称。
In my (faulty) mental model component selectors where only a way of effectively defining an application specific HTML
element.在我的(错误的)心智模型组件选择器中,只有一种有效定义应用程序特定
HTML
元素的方法。
In my (faulty) mental model directive selectors where only a way to define an application specific HTML
element attribute serving to modify the behavior of the element.在我的(错误的)心理模型指令选择器中,只有一种定义应用程序特定
HTML
元素属性的方法,用于修改元素的行为。
Having done the research and having carefully studied (all of the words in) the documentation I have come to realize that there's something more powerful going on here...完成研究并仔细研究(所有单词)文档后,我开始意识到这里有更强大的东西......
General Questions:一般的问题:
Specific Questions:具体问题:
Where have I got any of the above wrong?
我在哪里遇到上述任何错误?
"lazily" interpreted selectors
“懒惰地”解释了选择者
I don't know about lazily interpreted selectors. 我不知道懒惰的解释选择器。
If a tag that matches a selector or a component is found in a components template, then it is upgraded to an Angular component. 如果在组件模板中找到与选择器或组件匹配的标记,则会将其升级为Angular组件。 If
ViewContainerRef.createComponent()
is used (like the router does) to add a component dynamically, then a tag that matches the selector is added to the DOM and the component applied to it. 如果使用
ViewContainerRef.createComponent()
(如路由器那样)动态添加组件,则将与选择器匹配的标记添加到DOM并将组件应用于它。
In my (faulty) mental model component selectors where only a way of effectively defining an application specific HTML element.
在我的(错误的)心理模型组件选择器中,其中只有一种有效定义特定于应用程序的HTML元素的方法。
Selectors are for matching a DOM element with a component or directive for Angular to know what part of the DOM should become a component or directive. 选择器用于将DOM元素与Angular的组件或指令进行匹配,以了解DOM的哪个部分应该成为组件或指令。
What other aspects of component and directive selectors am I missing?
我错过了组件和指令选择器的哪些方面? eg is there more power to be harnessed here?
例如,这里有更多的权力可以利用吗?
Can a component have element attribute selector?
组件可以有元素属性选择器吗? and if so, what would the behavior/effect be?
如果是这样,行为/效果会是什么?
You can use custom tag names, attributes, and CSS classes and any combination of these. 您可以使用自定义标记名称,属性和CSS类以及这些类的任意组合。 You can't use
id
or selectors that span multiple elements. 您不能使用跨多个元素的
id
或选择器。 With ,
separated multiple selectors can be used where the component is added to elements where one of these matches. 使用
,
可以使用分离的多个选择器,其中将组件添加到其中一个匹配的元素。
Many of Angulars built-in directives use a list of selectors. 许多Angulars内置指令使用选择器列表。
In which situations would you want a directive to have an element selector?
在哪种情况下,您希望指令具有元素选择器?
A directive is the same as a component, just without it's own view. 指令与组件相同,只是没有它自己的视图。
<my-dropdown>
<my-item></my-item>
<my-item></my-item>
<my-item></my-item>
</my-dropdown>
Could be implemented by a component like 可以由像这样的组件实现
@Component({
selector: 'my-dropdown',
template: '<ng-content></ng-content>'
})
or 要么
@Directive({
selector: 'my-dropdown',
})
and they would do exactly the same. 他们会做同样的事情。
What's the syntax to apply a directive to synonym CSS attributes?
将指令应用于同义CSS属性的语法是什么? eg apply a directive to any of a group of CSS attribute selectors...
例如,将指令应用于任何一组CSS属性选择器......
selector: '[attr1],[attr2],[attr3]'
Pretty straight option to solve your problem: 非常直接的选择来解决您的问题:
@Component
decorator @Component
装饰器的组件的@Component
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.