如何在 angular 8 中对延迟加载模块使用通用指令

Question

我已经为数字创建了一个指令 type.I 已经在根应用程序模块中导入了它，但是我无法在 lazy modules.How 中使用来解决这个问题？

演示：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 { }

客户-list.component.html

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

订单-list.component.html

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

应用-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 导出指令？

If you don't export your directives, your application registers directives only and only inside your DirectivesModule

最后，您需要在惰性模块中导入它。

lazy.module.ts

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

如何在 angular 8 中对延迟加载模块使用通用指令

How to use common directive for lazy load modules in angular 8

typescript

angular7

angular8