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

Question

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

在 Angular 1 中，我们可以定义指令以限制为:匹配属性名称、标签名称、注释或类名称。我们创建的大多数指令都是属性或标记名称。首选项本来是标签名称，但 Sharepoint 上的发布平台删除了 unknown 元素。所以这意味着我们只能使用属性来将我们的指令引入发布页面。不过，对于 Angular 2，我只看到了通过标签名称实现的组件。

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

谢谢。

Answer 1

是的，selector @Component 的属性(property)装饰器是一个 CSS selector (或子集):

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

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().
Does not support parent-child relationship selectors.

_{Source: Angular Cheat Sheet / Directive Configuration, which @Component inherits.}

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

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

Selenium 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包含所有这三者的示例。

Is [attributeName="attributeValue"] supported?

是的。但请注意引号。在当前的实现中，选择器 [attributeName="attributeValue"]实际匹配 <sometag attributeName='"attributeValue"'> ，因此在采用这种方法之前先进行测试。