如何通过Angular 4中的共享模块正确导入角材料模块

我正在使用Angular与Angular材料构建一个应用程序，并且我的模块结构有一些问题。

正如指南所暗示的那样，导入材料模块被弃用，不应再进行，这就是为什么我在仅导入需要使用的材料模块的情况下进行了单独的材料模块的原因；然后将该模块导入在共享模块中，该模块最终在需要的任何地方导入，包括主要的AppModule。

我正在使用的材料组件之一是mdtooltip，除了我在平板电脑上测试我的应用程序时，一切都很好：发生了什么，是什么是工具提示对长时间的水龙头做出反应到，他们不会打开。我设法使它起作用的唯一方法是在我的AppModule中导入完整的材料模块(来自 @Angular/材料(，这是一个可怕的错误和不夸张的。任何其他方法似乎都没有削减它，因为他们都会在不解决磨难的同时带来自己的问题。

这些是我的模块(剥离了冗余导入语句(：

材料模块：

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

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

我做错了什么吗？您将如何将应用程序分为子模型？

预先感谢

取决于您需要使用树木摇动的编译和部署策略(用于消除代码或实时代码导入(。这是MaterialModule被弃用的主要动机。官方建议是仅在需要的模块中导入所需的组件。您使用所有导入创建单个MaterialModule的解决方案正在撤消该方面

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

您的方法很棒。您呈现的结构是材料中呈现的替代方法。我不确定您的工具提示不起作用。但是我想建议您仅在根模块上仅使用一次自定义材料模块。无需再次在共享模块中导入它。

您的第一个错误是在共享模块中的服务。共享模块不应具有提供商数组。Coremodule用于服务。

您不需要在共享模块中导入所有内容。共享模块通常用于出口。同样，材料模块不需要导入，因为它不使用它们。它的目的是导出。

如果使用NavbarComponent，则应用程序宽，以便在CoremoDule中。不在共享模块中。

如果您不需要，请不要将共享模块导入AppModule。共享模块适用于特征模块。

阅读官方文档：https：//angular.io/guide/ngmodule-faq#what-what-kinds-of-modules-should-i-i-have-have-and-how-how-show-should-i-------

在" src app"中创建共享模块。使用：NG G模块共享
在共享模块中导入所有所需的材料模块。重要的！！！有时，如果您尝试将一组模块集合在一起，则会遇到错误。您应该像以下=＆gt;
一个一个一个接一个地导入它们
从'@angular/材料/按钮';
导入{matbuttonModule}
来自'@angular/材料/form-field';
的导入{matformfieldModule}
import {matinputModule}来自'@angular/材料/输入';

然后

    @NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ]
})

现在，您可以在需要在共享模块中导入的一个或多个材料模块导入此共享模块。例如，如果您在学生示例中需要角材料=＆gt;

import {SharedModule} from '../shared/shared.module'

，然后

@NgModule({
  declarations: [
    TdFormComponent],
  imports: [
    CommonModule,
    SharedModule,
    
  ]
})

相关内容

最新更新

热门标签：