如何在角度8中的延迟加载模块中使用通用指令

Question

我已经为数字类型创建了一个指令。我已经在根应用程序模块中导入了该指令，但无法在惰性模块中使用。如何解决此问题？

演示：https://stackblitz.com/edit/angular-pctddo-1pyfzu?file=src%2Fapp%2Fapp.module.ts

app.module.ts：

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NumberDirective } from './numbers-only.directive';
@NgModule({
  declarations: [
    AppComponent,
    NumberDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

customer-list.component.html

<input type="text" numbersOnly placeholder="Numbers only">

order-list.component.html

<input type="text" numbersOnly placeholder="Numbers only">

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

Answer 1

您需要为指令创建feature module并在每次使用时将其导入相应的模块中，因为declarations数组中声明的所有实体（组件，指令，管道）仅属于此模块。

此外，别忘了从模块中导出指令

---

The declarations array

Feature modules

Answer 2

您可以为其创建一个ui模块。这样，您可以导入DirectivesModule您要使用的模块。

[另一种方法是，如果您的指令很常见，则可以使用AppModule或SharedModule。

我更新了您的Stackblitz.

directives.module.ts

@NgModule({
  imports: [CommonModule],
  declarations: [NumberDirective],
  exports: [NumberDirective]
})

export class DirectivesModule {}

为什么需要从DirectivesModule导出指令？

如果不导出指令，则您的应用程序注册 仅在DirectivesModule

中的指令

此外，您还需要将其导入到惰性模块中。

lazy.module.ts

@NgModule({
  imports: [
    DirectivesModule
  ],
  declarations: [...]
})
export class LazyModule { }