angular – 如何使指令和组件在全球范围内可用
发布时间:2020-12-17 17:46:13 所属栏目:安全 来源:网络整理
导读:我编写了一个自定义指令,我在Angular 2应用程序中使用它来关闭Angular 2应用程序的所有不同组件中的内容面板(我的模板中的一些内容持有者).由于这个代码对于每个组件都是完全相同的,我认为编写一个我可以定义一次的指令是有意义的,并且可以在所有组件中使用.
我编写了一个自定义指令,我在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父组件中导入一次该指令,然后我可以在所有子组件中使用该指令.遗憾的是,这不起作用,因此我必须分别在每个组件中导入此指令.难道我做错了什么?或者这种行为根本不可能? 解决方法
更新> = RC.5
您必须在要使用导入模块的组件,指令或管道的任何模块中导入模块.没有其他办法了. 您可以做的是创建一个导出其他几个模块的模块(例如,导出CommonModule的BrowserModule). @NgModule({ declarations: [CoolComponent,CoolDirective,CoolPipe],imports: [MySharedModule1,MySharedModule2],exports: [MySharedModule1,MySharedModule2,CoolComponent,}) 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})]); 请参阅下面的注释 – 即使根组件中的每个样式指南提供程序都应该优于boostrap(),但这不起作用: 原版的 在根组件上添加 @Component({ selector: 'my-app',providers: [provide(PLATFORM_DIRECTIVES,multi: true})],templat: `...` }) export component AppComponent { } @ Component(),@ Direction(),@ Pipe()已经包含@Injectable().也不需要在那里添加它. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |