如何通过 Angular 4 中的共享模块正确导入 Angular Material 模块? [英] How to correctly import the Angular Material module through a shared module in Angular 4?

问题描述

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

I'm building an application using Angular paired with Angular Material, and I'm having some issues with my modules structure.

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

As the guidelines suggest, importing the MaterialModule is deprecated and should no longer be done, which is why I've made a separate MaterialModule where I only import the Material modules I need to use; this module is then imported in a SharedModule, which is eventually imported everywhere it's needed, including the main AppModule.

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

One of the Material components I'm using is the MdTooltip, and it all works fine except for when I test my app on a tablet: what happens is that the tooltips don't react to long taps like they're supposed to, and they won't open. The only way I've managed to make it work is by importing the full MaterialModule (from @angular/material) in my AppModule, which is horrendously wrong and inelegant. Any other approach didn't quite seem to cut it, as they would all bring their own problems while not solving the ordeal.

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

These are my modules (stripped of redundant import statements):

材料模块:

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

我做错了吗?您将如何将您的应用划分为子模块?

Am I doing something wrong? How would you go about dividing your app into submodules?

提前致谢

推荐答案

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

Your approach is great. The structure that you have presented is an alternative that was presented in material.angular.io. I am unsure to why your tooltip does not work. But I would like to advise you to only use your custom MaterialModule only once on the root module. There is no need to import it in the SharedModule again.

这篇关于如何通过 Angular 4 中的共享模块正确导入 Angular Material 模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！