如何通过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):

MaterialModule:

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:

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:

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

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

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屋！