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

时间:2016-07-20 03:29:08

标签: angular

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

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

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

感谢。

4 个答案:

答案 0 :(得分:45)

是的,selector装饰器的@Component属性是CSS selector(或其子集):

  

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

     

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

     

来源: Angular Cheat Sheet / Directive Configuration@Component继承。

这样你可以使用[name-of-the-attribute](即CSS attribute selector),例如:

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

Se demo plunker here

通常的方法是CSS type (AKA element or tag) selector

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

它匹配名为some-tag的标记。

您甚至可以拥有与both a tag or an attribute匹配的组件:

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

Demo plunker包含所有三个示例。

  

是否支持[attributeName="attributeValue"]

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

答案 1 :(得分:9)

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

selector: 'custom-element-name'

使用:

selector: '[custom-attribute-name]'

在您的父组件模板中:

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

答案 2 :(得分:7)

@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和伪选择器

答案 3 :(得分:6)

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

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