角度2组件可以与属性选择器一起使用吗？

Question

我们目前有一个现有的小型Angular 1项目，该项目在内部部署Sharepoint 2013环境中使用。 对于我们内容的大部分内容，我们在Sharepoint环境中使用发布页面。

使用Angular 1，我们可以定义要限制的指令： 匹配属性名称，标记名称，注释或类名称 。 我们创建的大多数指令都是属性或标记名称。 首选项将是标记名称，但Sharepoint上的发布平台会删除未知元素。 这意味着我们留下了使用属性，以便将我们的指令带入发布页面。 但是使用Angular 2，我只看到了由标签名称实现的组件。

Angular 2是否可以使用属性名称来使用我们的组件？ 由于Sharepoint发布平台的限制，这是我们的要求。

谢谢。

Answer 1

是的， @Component装饰器的selector属性是一个CSS选择器 （或其子集）：

selector ： '.cool-button:not(a)'

指定在模板中标识此指令的CSS选择器。 支持的选择器包括element ， [attribute] .class和:not() 。
不支持父子关系选择器。

_{来源： 角度备忘单/指令配置 ， @Component继承。}

这样你就可以使用[name-of-the-attribute] （即CSS属性选择器 ），例如：

@Component({
    selector: "[other-attr]",
    ...
})
export class OtherAttrComponent {

Se demo plunker在这里 。

通常的方法是CSS类型（AKA元素或标记）选择器 ：

@Component({
    selector: "some-tag",
    ...
})

它匹配名称为some-tag 。

您甚至可以拥有一个与标签或属性匹配的组件：

@Component({
    selector: "other-both,[other-both]",
    template: `this is other-both ({{ value }})`
})
export class OtherBothComponent {

Demo plunker包含所有三个示例。

是否支持[attributeName="attributeValue"] ？

是。 但请注意引用。 在当前实现中，selector [attributeName="attributeValue"]实际上匹配<sometag attributeName='"attributeValue"'> ，因此在提交此方法之前进行测试。

Answer 2

是的，根据这个https://angular.io/docs/ts/latest/guide/cheatsheet.html （组件和指令一般非常相似）。 而不是使用元素选择器：

selector: 'custom-element-name'

采用：

selector: '[custom-attribute-name]'

在您的父组件的模板中：

<div custom-attribute-name></div>

Answer 3

@Component装饰器支持，元素选择器，属性选择器和类选择器的选择器属性：

1.元素选择器：

@Component({
 selector: 'app-servers'
})

用法： <app-servers></app-servers>

2.属性选择器：

@Component({
 selector: '[app-servers]'
})

用法： <div app-servers></div>

3.班级选择器：

@Component({
 selector: '.app-servers'
})

用法： <div class="app-servers"></div>

注意： Angular 2不支持id和伪选择器

Answer 4

绝对。 基本上这只是一个CSS选择器，所以如果你需要使用属性，你只需这样做：

@Component({
    selector: "my-tag[with-my-attribute]"
})