Как сделать директивы и компоненты доступными во всем мире
Я написал специальную директиву, которую я использую в своем приложении Angular 2 для закрытия панелей контента (некоторые владельцы контента в моем шаблоне) во всех различных компонентах моего приложения Angular 2. Поскольку для каждого компонента этот код совершенно одинаковый, я подумал, что имеет смысл написать директиву, которую я мог бы определить один раз, и использовать ее во всех компонентах. Вот как выглядит моя директива:
import { Directive, ElementRef, HostListener, Injectable } from '@angular/core'; @Directive({ selector: '[myCloseContentPanel]' }) export class CloseContentPanelDirective { private el: HTMLElement; constructor(el: ElementRef) { this.el = el.nativeElement; } @HostListener('click') onMouseClick() { this.el.style.display = 'none'; } } Теперь я ожидал, что смогу импортировать эту директиву один раз в родительский компонент app.component и что тогда я могу использовать эту директиву для всех дочерних компонентов. Это, к сожалению, не работает, поэтому мне придется импортировать эту директиву в каждом компоненте отдельно. Я делаю что-то неправильно? Или это поведение просто невозможно?
- Мин. / Макс. Валидатор в угловом 2 финале
- Каковы различия между SystemJS и Webpack?
- Как обращаться с кодами статуса http, отличными от 200 в Angular 2
- Локальное хранение в Угловом 2
- Как запустить функцию jquery в Angular 2 после каждой загрузки компонента
- Угловой 2 Прокрутите вверх, чтобы изменить маршрут
- Угловой 2 - возврат данных непосредственно из наблюдаемого
- Внедрение архитектуры плагинов / системы плагинов / сменных фреймов в Angular 2, 4, 5, 6
- Angular2: Как использовать несколько экземпляров одного и того же сервиса?
- Как создать службу Singleton в Angular 2?
- Каков правильный способ обмена результатами сетевого звонка с угловым Http в RxJs 5?
- Как использовать библиотеку moment.js в угловом 2-х машинописном приложении?
- angular4 httpclient csrf не отправляет x-xsrf-токен
update> = RC.5
Вы должны импортировать модуль в любом модуле, который хотите использовать компоненты, директивы или каналы импортированного модуля. Об этом нет.
Вы можете создать модуль, который экспортирует несколько других модhive (например, BrowserModule который экспортирует CommonModule .
@NgModule({ declarations: [CoolComponent, CoolDirective, CoolPipe], imports: [MySharedModule1, MySharedModule2], exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe], }) export class AllInOneModule {} @NgModule({ imports: [AllInOneModule] }) class MyModule {}
Таким образом вы делаете все экспортируемое AllInOneModule доступным для MyModule .
См. Также https://angular.io/docs/ts/latest/guide/ngmodule.html.
обновление <= RC.5
bootstrap(AppComponent, [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})]);
См. Комментарии ниже – даже если для providers стилей в корневом компоненте должно быть предпочтительнее boostrap() это не работает:
оригинал
На корневой компонент добавить
@Component({ selector: 'my-app', providers: [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})], templat: `...` }) export component AppComponent { }
@Component() , @Directive() , @Pipe() уже include @Injectable() . Не нужно также добавлять его туда.