Как определить компонент 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...

Ответы

<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',
})

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