Question

我正在使用Angular与Angular Material配对构建应用程序，我的模块结构存在一些问题。

正如指南所示，不推荐导入MaterialModule，不应该再进行，这就是为什么我创建了一个单独的MaterialModule，我只导入我需要使用的Material模块;然后将此模块导入SharedModule，最终导入到所需的任何位置，包括主AppModule。

我正在使用的一个Material组件是MdTooltip，除了我在平板电脑上测试我的应用程序时，一切正常：发生的事情是工具提示不会像他们认为的那样对长按钮做出反应到，他们不会打开。我设法使其工作的唯一方法是在我的AppModule中导入完整的MaterialModule（来自@ angular / material），这是非常错误和不优雅的。任何其他方法似乎都没有削减它，因为它们都会带来自己的问题，而不是解决困难。

这些是我的模块（剥离冗余的import语句）：

MaterialModule：

import { NgModule } from '@angular/core';
import {...} from '@angular/material';

@NgModule({
  imports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  exports: [
    MdGridListModule,
    MdButtonModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdInputModule,
    MdSelectModule,
    MdAutocompleteModule,
    MdIconModule,
    MdTooltipModule
  ],
  providers: [
    MdIconRegistry
  ]
})

export class MaterialModule {}

SharedModule：

import { MaterialModule } from '../material/app-material.module';
@NgModule({
  imports:      [
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    NavbarComponent,
    SearchFiltersComponent,
    RightCurrencyPipe
  ],
  exports:      [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    FlexLayoutModule,
    NavbarComponent,
    RightCurrencyPipe,
    SearchFiltersComponent
  ],
  providers: [
    SpinnerService,
    ProductsService,
    StatePersistenceService
  ]
})

export class SharedModule {}

的AppModule：

import { MaterialModule } from "@angular/material";
@NgModule({
  declarations: [
    AppComponent,
    ProductPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    LoginModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我做错了吗？您如何将应用程序划分为子模块？

提前致谢

Answer 1

你的方法很棒。您提供的结构是material.angular.io中提供的替代方案。我不确定为什么你的工具提示不起作用。但我建议您仅在根模块上使用自定义MaterialModule一次。无需再次在SharedModule中导入它。

Answer 2

您的第一个错误是SharedModule中的服务。 SharedModule不应具有Providers数组。 CoreModule用于服务。

您不需要在共享模块中导入所有内容。 SharedModule通常用于导出。 MaterialModule也不需要导入，因为它不使用它们。其目的是出口。

如果NavBarComponent在整个应用程序中使用，则应位于CoreModule中。不在SharedModule中。

如果不需要，请不要将SharedModule导入AppModule。 SharedModule用于FeaturedModule。

阅读正式文档：https://angular.io/guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them

Answer 3

根据您的编译和部署策略，您将需要使用树摇动（用于删除死代码或实时代码导入）。这是MaterialModule被弃用的主要动机。官方建议是only import the components you need在需要它的模块中。使用所有导入创建单个MaterialModule的解决方案是撤消该方面，但可能会有所不同，具体取决于您的项目结构（例如，如果您只使用单个模块）。

尝试从MaterialModule导出中删除SharedModule。这样，您的应用根目录中的模块只有一个入口点。

Answer 4

使用以下命令在“ src \ app”中创建共享模块：ng g模块共享
将所有所需的物料模块导入共享模块中。重要！！！如果您尝试一起导入模块集，有时会出错。您应该像下面这样一个一个地导入它们=>

从'@ angular / material / button'导入{MatButtonModule};

从'@ angular / material / form-field'导入{MatFormFieldModule};

从'@ angular / material / input'导入{MatInputModule};

然后

    @NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule

  ]
})

现在，您可以在需要在共享模块中导入的一个或多个物料模块的任何地方导入此共享模块。例如，如果您在学生示例中需要角形材料=>

import {SharedModule} from '../shared/shared.module'

然后

@NgModule({
  declarations: [
    TdFormComponent],
  imports: [
    CommonModule,
    SharedModule,
    
  ]
})

如何通过Angular 4中的共享模块正确导入Angular Material模块？

4 个答案: