角度2组件可以与属性选择器一起使用吗? [英] Can an angular 2 component be used with an attribute selector?

问题描述

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

We currently have an existing small Angular 1 project that is used in an on premises Sharepoint 2013 environment. For a large part of our content, we use publishing pages on the Sharepoint environment.

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

With Angular 1, we could define directives to be restricted to: match attribute name, tag name, comments, or class name. 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. 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是否可以使用属性名称来使用我们的组件?由于Sharepoint发布平台的限制，这是我们的要求.

Is it possible with Angular 2 to use attribute names in order to use our components? This is a requirement for us because of the restrictions in the Sharepoint publishing platform.

谢谢.

推荐答案

是的，@Component装饰器的selector属性是

Yes, the selector property of the @Component decorator is a CSS selector (or a subset of):

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

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

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.

_来源: 角度备忘单/指令配置，它是@Component继承的.

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

这样，您就可以使用[name-of-the-attribute](即 CSS属性选择器)，例如:

That way you can use [name-of-the-attribute] (namely, the CSS attribute selector), such as:

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

Se 此处的演示插件 .

通常的方法是 CSS类型(AKA元素或标签)选择器:

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

它与名称为some-tag的标签匹配.

And it matches a tag with name 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.

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

是的.但是请注意引号.在当前的实现中，选择器[attributeName="attributeValue"]实际上与<sometag 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.

这篇关于角度2组件可以与属性选择器一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！