Можно ли использовать компонент angular 2 с селектором атрибутов?

В настоящее время мы имеем существующий небольшой проект Angular 1, который используется в среде Sharepoint 2013. Для большей части нашего контента мы используем публикации в среде Sharepoint.

С Angular 1 мы можем определить директивы, которые должны быть ограничены: сопоставление имени атрибута, имени тега, комментариев или имени класса. Большинство директив, которые мы создали, были атрибутом или именем тега. Предпочтение было бы именем тега, но платформа публикации в Sharepoint выделяет элементы неизвестные. Это означает, что нам осталось использовать атрибуты, чтобы привести наши директивы на страницы публикации. При использовании Angular 2, я видел только компоненты, реализованные по имени тега.

Можно ли использовать Angular 2 для использования имен атрибутов для использования наших компонентов? Это требование для нас из-за ограничений в платформе публикации Sharepoint.

Спасибо.

Ответы

Ответ 1

Да, свойство selector декоратора @Component - селектор CSS (или подмножество из):

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

Определяет селектор CSS, который идентифицирует эту директиву в шаблоне. Поддерживаемые селектора включают element, [attribute], .class и :not().
Не поддерживает селектор отношений родитель-потомок.

_{Источник: Angular Конфигурация чит-листа/директивы, которую @Component наследует.суб >}

Таким образом вы можете использовать [name-of-the-attribute] (а именно, селектор атрибутов CSS), например:

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

Se демонстрационный плункер здесь.

Обычным способом является селектор типа 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"]?

Да. Но помните кавычки. В текущей реализации селектор [attributeName="attributeValue"] действительно соответствует <sometag attributeName='"attributeValue"'>, поэтому перед тем, как совершить этот подход, проверьте тест.

Ответ 2

Да, в соответствии с этим https://angular.io/docs/ts/latest/guide/cheatsheet.html (компоненты и директивы очень похожи в целом). Вместо использования селектора элементов:

selector: 'custom-element-name'

Использование:

selector: '[custom-attribute-name]'

И в шаблоне родительского компонента:

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

Ответ 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 и

Ответ 4

Совершенно верно. По сути, это просто селектор CSS, поэтому, если вам нужно использовать атрибут, вы просто делаете это:

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