angular的模块引入问题

最新推荐文章于 2024-10-20 22:38:17 发布

原创最新推荐文章于 2024-10-20 22:38:17 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

当遇到 Angular 中 'ngModel' 报错时，通常引入 FormsModule 即可解决。然而，在存在子模块的情况下，有时需在子模块而非主模块（如 FileUploadModule）导入。模块导入原则：组件或指令需在使用它们的每个模块导入，而服务只需在主模块导入一次。通过创建通用模块（TestModule）导入常用模块并导出，简化其他模块导入过程。

有时候会遇到 Can't bind to 'ngModel' since it isn't a known property of 'input' 的报错，这个时候一般引入FormsModule就可以解决

但是有时候在有子模块的时候，你会发现在住模块app.module里引入FormsModule并没用，需要在子模块（如下的FileUploadModule）引入才能解决问题

const routes: Routes = [
  {
    path: 'upload',
    loadChildren: () =>
      import('./modules/file-upload/file-upload.module').then(
        (m) => m.FileUploadModule
      ),
  },
];

那么什么东西只需要在主模块引入，什么需要在子模块都要引入呢

如果是用到导入模块的组件或者指令（ngModel就是指令），则需要在用到的每个模块中导入它，
如果是用到导入模块的服务，则只需主模块中将其导入一次。

实际上可以定义一个通用的模块(TestModule)，导入常需要导入的模块并导出，其他模块只要导入(TestModule)即可

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

@NgModule({
  declarations: [FileUpload1Component, FileUpload2Component],
  imports: [CommonModule, FileUploadRoutingModule, FormsModule, TestModule],
})