问题描述
我正在开发一个 Github 存储库,它遵循 Angular(英雄之旅)的官方教程.您可以在此处查看所有代码.
我的问题是,我在应用程序的主模块 (app.module) 中声明了一个指令,如果我在 AppComponent
中使用它,它运行良好(该指令仅突出显示DOM 元素内的文本).
但是我在 AppModule
中有另一个名为 HeroesModule
的模块,在这个模块的一个组件中,这个指令不起作用.
主要代码,在这里:
app/app.module.ts
...从./shared/highlight.directive"导入{HighlightDirective};@NgModule({进口:[浏览器模块,表单模块,Http模块,InMemoryWebApiModule.forRoot(InMemoryDataService),应用路由模块,核心模块,英雄模块],声明: [应用组件,HeroTop组件,HighlightDirective <-------],供应商: [{ 提供:APP_CONFIG,useValue:AppConfig }],引导程序:[ AppComponent ]})...app/heroes/heroes.module.ts
@NgModule({进口:[通用模块,表单模块,英雄路由模块],声明: [英雄列表组件,英雄搜索组件,英雄细节组件,HeroForm 组件],供应商: [英雄服务],出口:[英雄搜索组件]})
app/shared/highlight.directive.ts
import { Directive, ElementRef, Input } from '@angular/core';@Directive({ 选择器: '[tohHighlight]' })导出类 HighlightDirective {构造函数(el:ElementRef){el.nativeElement.style.backgroundColor = '黄色';}}
app/app.component.ts
{{title}}
<----- 这里的作品<toh-nav></toh-nav><路由器插座></路由器插座>
app/heroes/hero-list/hero-list.component.ts
<h2>{{selectedHero.name |大写}}是我的英雄<p tohHighlight>测试</p><----- 这里没有<button (click)="gotoDetail()">查看详情</button>
如果需要,您可以在 Github 存储库中自行查看、安装和测试.
如果需要使用指令
@Directive({选择器:'[appMyCommon]'})导出类 MyCommonDirective{}
你应该在任何地方创建一个新的模块.
如果您使用 Angular CLI,您可以生成:
ng g module my-common
模块:
@NgModule({声明:[MyCommonDirective],出口:[MyCommonDirective]})导出类 MyCommonModule{}
重要!导出允许您在模块外使用指令.
最后,在需要使用指令的每个模块中导入该模块.
例如:
@NgModule({进口:[MyCommonModule]})导出类 AppModule{}
示例:Plunker
I'm developing a Github repo which follows the offical tutorial of Angular (Tour of Heroes). You can see all the code here.
My problem, is that I have a directive declared in the main module of the app (app.module) and, if I use it inside the AppComponent
, it works good (the directive only highlight a text inside a DOM element).
But I have another module called HeroesModule
within AppModule
, and inside a component of this module, this directive doesn't work.
The main code, here:
app/app.module.ts
...
import { HighlightDirective } from "./shared/highlight.directive";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
CoreModule,
HeroesModule
],
declarations: [
AppComponent,
HeroTopComponent,
HighlightDirective <-------
],
providers: [
{ provide: APP_CONFIG, useValue: AppConfig }
],
bootstrap: [ AppComponent ]
})
...
app/heroes/heroes.module.ts
@NgModule({
imports: [
CommonModule,
FormsModule,
HeroRoutingModule
],
declarations: [
HeroListComponent,
HeroSearchComponent,
HeroDetailComponent,
HeroFormComponent
],
providers: [
HeroService
],
exports: [
HeroSearchComponent
]
})
app/shared/highlight.directive.ts
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[tohHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
app/app.component.ts
<h1 tohHighlight>{{title}}</h1> <----- HERE WORKS
<toh-nav></toh-nav>
<router-outlet></router-outlet>
app/heroes/hero-list/hero-list.component.ts
<div *ngIf="selectedHero">
<h2>
{{selectedHero.name | uppercase}} is my hero
</h2>
<p tohHighlight>Test</p> <----- HERE IT DOESN'T
<button (click)="gotoDetail()">View Details</button>
</div>
You can see, install it and test it by yourself in the Github repo, if you need it.
If you need to use the Directive
@Directive({
selector: '[appMyCommon]'
})
export class MyCommonDirective{}
everywhere you should create a new Module.
If you use the Angular CLI you can generate:
ng g module my-common
The Module:
@NgModule({
declarations: [MyCommonDirective],
exports:[MyCommonDirective]
})
export class MyCommonModule{}
Important! the exports allow you to use the Directives outside the Module.
Finally, import that Module in every Module where you need to use the Directive.
for example:
@NgModule({
imports: [MyCommonModule]
})
export class AppModule{}
Example: Plunker
这篇关于如何为所有模块全局声明一个指令?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!