如何通過 Angular 4 中的共享模塊正確導入 Angular Material 模塊？

Question

我正在使用 Angular 和 Angular Material 構建應用程序，但我的模塊結構存在一些問題。

正如指導方針所建議的，導入 MaterialModule 已被棄用，不應再進行，這就是為什么我制作了一個單獨的 MaterialModule，我只導入了我需要使用的 Material 模塊； 這個模塊然后被導入到一個 SharedModule 中，它最終被導入到任何需要它的地方，包括主 AppModule。

我正在使用的 Material 組件之一是 MdTooltip，除了我在平板電腦上測試我的應用程序之外，它一切正常：工具提示不會像它們應該的那樣對長按做出反應，並且他們不會打開。 我設法讓它工作的唯一方法是在我的 AppModule 中導入完整的 MaterialModule（來自 @angular/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

根據您的編譯和部署策略，您將需要使用搖樹（用於消除死代碼或導入實時代碼）。 這是MaterialModule被棄用的主要動機。 官方建議只在需要的模塊中導入你需要的組件。 您使用所有導入創建單個MaterialModule解決方案正在撤消該方面，但可能會根據您的項目結構起作用（例如，如果您僅使用單個模塊）。

嘗試從SharedModule導出中刪除MaterialModule 。 這樣，您的應用程序根目錄中的模塊只有一個入口點。

Answer 2

你的方法很棒。 您提供的結構是 material.angular.io 中提供的替代結構。 我不確定為什么您的工具提示不起作用。 但我想建議您只在根模塊上使用您的自定義 MaterialModule 一次。 無需再次將其導入 SharedModule 中。

Answer 3

您的第一個錯誤是 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 4

1. 使用以下命令在“src\\app”中創建一個共享模塊：ng g module shared

2. 在共享模塊中導入所有需要的材料模塊。 重要的！！！ 如果您嘗試將一組模塊一起導入，有時會出現錯誤。 你應該像下面一樣一一導入它們=>

   從'@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,
    
  ]
})