[英]Can an angular 2 component be used with an attribute selector?
We currently have an existing small Angular 1 project that is used in an on premises Sharepoint 2013 environment. 我们目前有一个现有的小型Angular 1项目,该项目在内部部署Sharepoint 2013环境中使用。 For a large part of our content, we use publishing pages on the Sharepoint environment.
对于我们内容的大部分内容,我们在Sharepoint环境中使用发布页面。
With Angular 1, we could define directives to be restricted to: match attribute name, tag name, comments, or class name . 使用Angular 1,我们可以定义要限制的指令: 匹配属性名称,标记名称,注释或类名称 。 Most of the directives we created were attribute or tag name.
我们创建的大多数指令都是属性或标记名称。 The preference would have been tag name, but the publishing platform on Sharepoint strips out unknown elements.
首选项将是标记名称,但Sharepoint上的发布平台会删除未知元素。 So that means we were left with using attributes in order to bring our directives in to the publishing pages.
这意味着我们留下了使用属性,以便将我们的指令带入发布页面。 With Angular 2 though, I've only seen components implemented by tag name.
但是使用Angular 2,我只看到了由标签名称实现的组件。
Is it possible with Angular 2 to use attribute names in order to use our components? Angular 2是否可以使用属性名称来使用我们的组件? This is a requirement for us because of the restrictions in the Sharepoint publishing platform.
由于Sharepoint发布平台的限制,这是我们的要求。
Thanks. 谢谢。
Yes, the selector
property of the @Component
decorator is a CSS selector (or a subset of): 是的,
@Component
装饰器的selector
属性是一个CSS选择器 (或其子集):
selector
:'.cool-button:not(a)'
selector
:'.cool-button:not(a)'
Specifies a CSS selector that identifies this directive within a template.
指定在模板中标识此指令的CSS选择器。 Supported selectors include
element
,[attribute]
,.class
, and:not()
.支持的选择器包括
element
,[attribute]
.class
和:not()
。
Does not support parent-child relationship selectors.不支持父子关系选择器。
Source: Angular Cheat Sheet / Directive Configuration , which
@Component
inherits.来源: 角度备忘单/指令配置 ,
@Component
继承。
That way you can use [name-of-the-attribute]
(namely, the CSS attribute selector ), such as: 这样你就可以使用
[name-of-the-attribute]
(即CSS属性选择器 ),例如:
@Component({
selector: "[other-attr]",
...
})
export class OtherAttrComponent {
Se demo plunker here . Se demo plunker在这里 。
The usual way is the CSS type (AKA element or tag) selector : 通常的方法是CSS类型(AKA元素或标记)选择器 :
@Component({
selector: "some-tag",
...
})
And it matches a tag with name some-tag
. 它匹配名称为
some-tag
。
You can even have a component that matches both a tag or an attribute : 您甚至可以拥有一个与标签或属性匹配的组件:
@Component({
selector: "other-both,[other-both]",
template: `this is other-both ({{ value }})`
})
export class OtherBothComponent {
Demo plunker contains examples of all three. Demo plunker包含所有三个示例。
Is
[attributeName="attributeValue"]
supported?是否支持
[attributeName="attributeValue"]
?
Yes. 是。 But mind the quotes.
但请注意引用。 In the current implementation, the selector
[attributeName="attributeValue"]
actually matches <sometag attributeName='"attributeValue"'>
, so test around before committing to this approach. 在当前实现中,selector
[attributeName="attributeValue"]
实际上匹配<sometag attributeName='"attributeValue"'>
,因此在提交此方法之前进行测试。
Yes, according to this https://angular.io/docs/ts/latest/guide/cheatsheet.html (Components and Directives are very similar in general). 是的,根据这个https://angular.io/docs/ts/latest/guide/cheatsheet.html (组件和指令一般非常相似)。 Instead of using element selector:
而不是使用元素选择器:
selector: 'custom-element-name'
Use: 采用:
selector: '[custom-attribute-name]'
And in your parent component's template: 在您的父组件的模板中:
<div custom-attribute-name></div>
Selector property of @Component decorator support, element selector, attribute selector and class selector: @Component装饰器支持,元素选择器,属性选择器和类选择器的选择器属性:
1. Element selector: 1.元素选择器:
@Component({
selector: 'app-servers'
})
Usage: <app-servers></app-servers>
用法:
<app-servers></app-servers>
2. Attribute selector: 2.属性选择器:
@Component({
selector: '[app-servers]'
})
Usage: <div app-servers></div>
用法:
<div app-servers></div>
3. Class selector: 3.班级选择器:
@Component({
selector: '.app-servers'
})
Usage: <div class="app-servers"></div>
用法:
<div class="app-servers"></div>
Note: Angular 2 does not support id and pseudo selectors 注意: Angular 2不支持id和伪选择器
Absolutely. 绝对。 Essentially this is just a CSS selector, so if you need to use attribute you just do this:
基本上这只是一个CSS选择器,所以如果你需要使用属性,你只需这样做:
@Component({
selector: "my-tag[with-my-attribute]"
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.