Как определить компонент Angular 2 или директиву с несколькими селекторами

Цель:

Предоставляйте селектора синонимов для компонентов и директив в моем приложении.

Мотивация:

Есть моменты, когда компонент или директива предоставляет функциональные возможности, которые можно рассматривать по-разному, в то время как имя селектора должно осмысленно представлять или упрощать представление о том, как работает компонент или директива (это имя мнемоническое устройство).

Исследование:

директивы

Я заметил, что в материале 2 представлены несколько селекторов для его директив MdList и MdListItem:

https://github.com/angular/material2/blob/master/src/lib/list/list.ts

@Component({
  moduleId: module.id,
  selector: 'md-list, md-nav-list',
  host: {'role': 'list'},
  template: '<ng-content></ng-content>',
  styleUrls: ['list.css'],
  encapsulation: ViewEncapsulation.None
})
export class MdList {}

... и...

@Component({
  moduleId: module.id,
  selector: 'md-list-item, a[md-list-item]',
  host: {
    'role': 'listitem',
    '(focus)': '_handleFocus()',
    '(blur)': '_handleBlur()',
  },
  templateUrl: 'list-item.html',
  encapsulation: ViewEncapsulation.None
})
export class MdListItem implements AfterContentInit {
    ...
}

На странице директивы атрибутов Angular 2 в документации:

https://angular.io/docs/ts/latest/guide/attribute-directives.html

@Directive требуется, чтобы селектор CSS идентифицировал HTML в шаблоне, который связано с нашей директивой. Селектором CSS для атрибута является имя атрибута в квадратных скобках. Селектор директивы [myHighlight]. Angular найдет все элементы в шаблоне, у которых есть атрибут с именем myHighlight.

Какая ссылка на следующие селектора атрибутов Страница MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

На странице Angular 2 Cheat Sheet:

https://angular.io/docs/js/latest/guide/cheatsheet.html

Синтаксис запятой селекторов CSS 2 list.ts, которые я нашел, указывает на то, что они применимы к нескольким ситуациям - моя оценка того, что делают эти селекторы:

class MdList применяется к элементам md-list и md-nav-list
class MdListItem применяется к элементам md-list-item и a, которые имеют атрибут md-list-item

Компоненты

На странице Angular 2 Обзор архитектуры:

https://angular.io/docs/ts/latest/guide/architecture.html

Селектор
: селектор CSS, который сообщает Angular создать и вставить экземпляр этого компонента, где он находит тег <hero-list> в родительском HTML. Для Например, если HTML-приложение содержит <hero-list></hero-list>, то Angularвставляет экземпляр вида HeroListComponent между этими тегами.

Интересно, что в дикой природе я не встречал ни одного примера компонента, который имеет несколько селекторов.

Ментальная модель Неверные представления:

Когда я был представлен в Angular 2, я "лениво" интерпретировал selectors просто как имя компонента или директивы, представленной в приложении HTML.

В моих (ошибочных) ментальных селекторах компонентов модели, где только способ эффективного определения конкретного приложения HTML.

В моих (ошибочных) ментальных селекторах директив модели, где только способ определить специфичный для приложения атрибут HTML, служащий для изменения поведения элемента.

Проведя исследование и тщательно изучив (все слова) документацию, я понял, что здесь есть что-то более сильное...

Общие вопросы:

Где я получил что-то из этого неправильно?
Какие другие аспекты селекторов компонентов и директив мне не хватает? например есть ли здесь больше энергии?

Конкретные вопросы:

Может ли компонент иметь селектор атрибутов элемента? и если да, то каково было бы поведение/эффект?
В каких ситуациях вы хотите, чтобы директива имела селектор элементов?
Какой синтаксис применим директиву к синонимам CSS-атрибутов? например применить директиву к любой из групп селекторов атрибутов CSS...

Ответ 1

Где я получил какое-либо из вышеуказанных ошибок?

"лениво" интерпретируемые селекторные функции

Я не знаю о лениво интерпретируемых селекторах.

Если тег, который соответствует селектору или компоненту, находится в шаблоне компонентов, он обновляется до компонента Angular. Если ViewContainerRef.createComponent() используется (например, маршрутизатор) для динамического добавления компонента, то тег, который соответствует селектору, добавляется в DOM и компонент, примененный к нему.

В моих (ошибочных) ментальных селекторах компонентов модели, где только способ эффективного определения конкретного HTML-элемента приложения.

Селекторы предназначены для сопоставления элемента DOM с компонентом или директивой для Angular, чтобы узнать, какая часть DOM должна стать компонентом или директивой.

Какие другие аспекты селекторов компонентов и директив мне не хватает? например есть ли здесь больше энергии?

Может ли компонент иметь селектор атрибутов элемента? и если да, то каково было бы поведение/эффект?

Вы можете использовать собственные имена тегов, атрибуты и классы CSS и любую их комбинацию. Вы не можете использовать id или селектора, которые охватывают несколько элементов. При использовании , можно выделить несколько селекторов, где компонент добавляется к элементам, где один из них соответствует.
Многие встроенные директивы Angulars используют список селекторов.

В каких ситуациях вы хотите, чтобы директива имела селектор элементов?

Директива такая же, как и компонент, без собственного представления.

<my-dropdown>
  <my-item></my-item>
  <my-item></my-item>
  <my-item></my-item>
</my-dropdown>

Может быть реализован таким компонентом, как

@Component({
  selector: 'my-dropdown',
  template: '<ng-content></ng-content>'
})

или

@Directive({
  selector: 'my-dropdown',
})

и они будут делать то же самое.

Каков синтаксис для применения директивы атрибутов синонима CSS? например применить директиву к любой из групп селекторов атрибутов CSS...

selector: '[attr1],[attr2],[attr3]'

директивы

Компоненты

Ответ 1

Ответ 2