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

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

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

我正在使用的材料组件之一是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,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,ReactiveFormsModule,NavbarComponent,RightCurrencyPipe,SearchFiltersComponent
  ],providers: [
    SpinnerService,ProductsService,StatePersistenceService
  ]
})

export class SharedModule {}

的AppModule：

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

难道我做错了什么？您如何将应用程序划分为子模块？

提前致谢

解决方法

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