Angular 4自定义指令混淆

所以我最近开始学习。我已经到了要开始制定自定义指令的地步。经过一些研究，我得出结论，要做到这一点，只需要几个步骤

创建指令

将其导入应用程序模块

将其包含在应用程序模块声明数组中

在组件的模板中使用它

考虑到这一点，我开始创建一个自定义指令，它只需更改attribute指令所附加到的元素的背景色。然而，我的指令似乎不起作用。 然后我试着将它包含在我的路由模块中，然后指令起作用了

为什么我必须将其包含在路由模块中？这让人感觉不那么全局，我觉得我更愿意将它直接包含在根模块中，这样我就可以在整个应用程序中使用该指令。如果我只在应用程序根模块中包含它，它是否仍然有效

是否最好为该指令创建一个单独的模块，然后导出该模块并将其导入根模块？或者在我的路由模块中导入指令可以吗

更新

app.module.ts

app routing.module.ts

app component.html

因此，问题在于，如果我将指令包含在

app routing.module.ts

文件中，则导航栏和页脚似乎无法访问该指令，但如果我将指令包含在

app.module.ts

文件中，则该指令似乎仅适用于导航栏和页脚，而不适用于任何单独的路由。显然，我不能在两个模块中都包含该指令

---

但是，我可以在应用程序的任何位置使用任何内置的角度指令，例如

ngIf

。我希望我的指令具有相同的作用域。

指令、组件和管道不是全局的。在特殊情况下，服务是免费的。

---

指令在它们所属的模块中可用，在导入直接或传递导出指令的模块的模块中可用

不清楚为什么需要包含路由模块。发布代码可以让它更清晰。您不导入指令（带有角度导入），只导入模块。@GünterZöchbauer抱歉，您不清楚。我更新了问题以包含相关代码和对问题的更好解释。我在理解你的评论方面取得了一些进展。希望帮助路由模块应该只包含与路由器相关的东西，应该在不同地方重用的组件和指令应该放在一个或多个共享模块中。指令和组件应列在声明和导出中。然后，通过导入共享模块，使共享模块的指令和组件可供其他模块使用。有更多关于模块的信息。谢谢，共享模块部分正是我最终需要的。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Routing Module
import { AppRoutingModule } from './app-routing.module';
// app layout components
import { AppComponent } from './app.component';
import { AppNavbarComponent } from './components/app-navbar/app-navbar.component';
import { AppFooterComponent } from './components/app-footer/app-footer.component';


@NgModule({
  declarations: [
    AppNavbarComponent,
    AppFooterComponent,
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Routing Components
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { PageNotFoundComponent } from './components/page-not-
found/page-not-found.component';
// Directives
import { TestDirective } from './directives/test/test.directive';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AboutComponent,
    HomeComponent,
    PageNotFoundComponent,
    TestDirective
  ],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<app-navbar></app-navbar>

<router-outlet></router-outlet>

<app-footer></app-footer>