Question

在我的角度应用程序中，我有一个presentation.module来保存所有组件。我创建了一个shared-material.module，其中包含整个应用程序中使用的所有角度材质2模块。我在之前的presentation.module中导入了它。在我的app.module中，我导入了presentation.module。

app.module声明app.component，header.component和footer.component

这是我的app.module：

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    // Layer's modules
    PresentationModule,
    BusinessDelegateModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的presentation.module：

const modules = [
  SharedMaterialModule,
  SharedModule,
  HomePresentationModule,
  SecurityPresentationModule,
]

@NgModule({
  imports: [...modules],
  exports: [...modules]
})
export class PresentationModule {
}

shared-material.module的源代码：

// updated: Before, i have just imported these modules without re-exporting them.
const materialModules = [
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSidenavModule,
  MatFormFieldModule,
  MatInputModule,
  MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class SharedMaterialModule {
}

如下所示，我已注册了security-presentation.module，这是源代码：

@NgModule({
  imports: [
    SharedModule,
    SecurityRoutingModule
  ],
  declarations: [
    LoginComponent,
    RegisterComponent,
    EmailConfirmationComponent,
    PasswordResetComponent
  ]
})
export class SecurityPresentationModule {
}

我的问题是，当我尝试在mat-input-field中使用login.component时（在security-presentation.module中），我收到了此错误：

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element

但其他角度素材2组件在app.component，header.component和footer.component中运行良好：

app.component.html

<div>

  <app-header></app-header>

  <div class="main-container">
    <router-outlet></router-outlet>
  </div>

  <app-footer></app-footer>

</div>

我应该在每个演示模块中导入shared-material.module还是有办法解决这个问题？

提前谢谢。

Answer 1

因为您的共享模块应首先导入材料模块：

const materialModules = [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class SharedMaterialModule {
}

＆＃39;垫外形字段＆＃39;不是一个已知的元素 - Angular 4＆amp;角度材料2

1 个答案: