Цель:
Предоставляйте селектора синонимов для компонентов и директив в моем приложении.
Мотивация:
Есть моменты, когда компонент или директива предоставляет функциональные возможности, которые можно рассматривать по-разному, в то время как имя селектора должно осмысленно представлять или упрощать представление о том, как работает компонент или директива (это имя мнемоническое устройство).
Исследование:
директивы
Я заметил, что в материале 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...