角度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]"
})