Question

在我的Angular 6应用程序中，我有一个app.module.ts文件，该文件导入了一个自定义模块：

import { AppGuiModule } from './app-gui.module';
...
imports: [
  AppGuiModule,

依次，app-gui.module文件导入表单模块：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
  FormsModule,
  ReactiveFormsModule,

我认为使用[(ngModel)]表单元素就足够了。

但是，事实并非如此，它给了我错误：

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
  <div>
    <label>name:
      <input [ERROR ->][(ngModel)]="user.name" placeholder="name"/>
    </label>
  </div>
"): ng:///AppModule/UserComponent.html@6:13

仅当我也从app.module.ts文件中导入表单模块时，应用程序才能正常加载：

import { AppGuiModule } from './app-gui.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
  FormsModule,
  ReactiveFormsModule,
  AppGuiModule,

我应该将所有与GUI相关的导入语句归为一个模块吗？

有什么办法可以实现某些可移植进口？

Answer 1

Angular模块不会从导入的模块继承模板相关的抽象（管道，组件，指令）。但是，Angular模块却可以用于服务（通过注入器作用域）。在这种情况下，ngModel是一个 template 抽象，因此，您需要导入FormsModule才能访问其中的公共声明（导出）。

Answer 2

我可以解决问题，确实可以像我希望的那样以过渡性的方式来解决。我所缺少的是在exports模块的AppGuiModule块中列出了表单模块。

以下是一些伪源代码：

AppGuiModule模块：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    FormsModule,
    ReactiveFormsModule,
  ]
})
export class AppGuiModule { }

AppModule模块：

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    AppGuiModule,
  ],
})
export class AppModule { }

传递模块导入语句

2 个答案: