Angular 4 Custom指令混乱

Question

所以我最近开始学习角度。我已经到了想要开始制作自定义指令的地步。经过一些研究后，我发现只需要几步就可以完成。

1. 创建指令
2. 将其导入您的应用模块
3. 将其包含在app module声明数组
中
4. 在组件的模板中使用它

考虑到这一点，我开始创建一个自定义指令，它只是简单地改变属性指令附加到的元素的背景颜色。但是，我的指示似乎不起作用。 然后我尝试将它包含在我的路由模块中，然后指令工作......

为什么我必须将它包含在路由模块中？感觉不那么全局化，我觉得我宁愿直接将它包含在root模块中，以便我可以在整个应用程序中使用该指令。如果我只在app根模块中包含它，它不应该仍然有效吗？

为指令创建单独的模块然后导出该模块并将其导入根模块会更好吗？或者在我的路由模块中导入指令好吗？

更新

app.module.ts

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 { }

app-routing.module.ts

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-component.html

<app-navbar></app-navbar>

<router-outlet></router-outlet>

<app-footer></app-footer>

所以问题是如果我将导航栏和页脚包含在app-routing.module.ts文件中，但是如果我将该指令包含在app.module.ts文件中，导航栏和页脚似乎无法访问该指令，则该指令会出现仅适用于导航栏和页脚，但不适用于任何单独的路径。显然，我不能在两个模块中包含该指令。

然而，我可以在应用程序的任何位置使用任何内置角度指令，例如ngIf。我希望我的指令具有相同的范围。

Answer 1

指令，组件和管道不是全局的。在特殊情况下，服务 指令在它们所属的模块中以及在导入直接或可传递地导出指令的模块的模块中可用