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

Question

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

正如指南所建议的那样，导入 MaterialModule 已被弃用，不应再进行，这就是为什么我制作了一个单独的 MaterialModule，我只导入我需要使用的 Material 模块；然后将此模块导入到 SharedModule 中，最终将其导入到需要它的任何地方，包括主 AppModule。

我使用的 Material 组件之一是 MdTooltip，它一切正常，除了我在平板电脑上测试我的应用程序时:发生的情况是工具提示不会像预期的那样对长按使用react到，他们不会打开。我设法让它工作的唯一方法是在我的 AppModule 中导入完整的 MaterialModule(来自@angular/material)，这是非常错误和不雅的。任何其他方法似乎都不太奏效，因为它们都会带来自己的问题，而不是解决问题。

这些是我的模块(去除了多余的导入语句):

Material 模块:

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 {}

共享模块:

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 {}

应用模块:

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

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

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