在单个组件上导入角材料模块答案

【问题标题】：Importing anuglar-material module on single component在单个组件上导入角材料模块
【发布时间】：2018-07-30 02:15:22
【问题描述】：

编辑：通过使用 @angular/material 而不是 angular-material 修复。如果您不熟悉 Angular，请按照以下答案进行操作：)

我正在尝试将“MatToolbarModule”导入单个导航栏组件，以便在 Angular 项目的 navbar.component.html 中使用它，但这似乎不起作用。在“app.module.ts”中导入模块并在 index.html 中使用它可以正常工作。

这是我的 navbar.component.ts ：

import {NgModule} from '@angular/core';
import {MatToolbarModule} from 'angular-material';

@NgModule({
imports: [MatToolbarModule]
})
//Component decorator and rest of code is untouched

在我的 navbar.component.html 中：

<mat-toolbar>MyTitle</mat-toolbar>

我得到错误：“如果 'mat-toolbar' 是一个 Angular 组件，那么验证它是这个模块的一部分。”

我正在使用 angular 5 和最新版本的 angular-material 及其依赖项。谢谢！

【问题讨论】：

关于材料文档导入看起来像这样 - import {MatToolbarModule} from '@angular/material/toolbar。还是我错过了什么？
我使用的包是 angular-material 并且相同的导入行在 app.module.ts /w index.html 中工作正常。

标签： angular

【解决方案1】：

您必须导出您在模块中导入的所有内容，它是一个功能模块。

// moved this to independent file keeping the app.module cleaner
import { NgModule } from '@angular/core';
import {
    MatCheckboxModule,
    MatInputModule,
    MatSelectModule,
    MatRadioModule,
    MatMenuModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatTabsModule,
    MatButtonModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatAutocompleteModule,
    MatExpansionModule
} from '@angular/material';

const materialModules = [
    MatCheckboxModule,
    MatInputModule,
    MatSelectModule,
    MatRadioModule,
    MatMenuModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatTabsModule,
    MatButtonModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatAutocompleteModule,
    MatExpansionModule
];

@NgModule({
    declarations: [
    ],
    imports: materialModules,
    exports: materialModules
})
export class MaterialModule { }

【讨论】：

这样做并将其导入 app.module 使其可用于项目中的每个组件？
是的，我在我的项目上做同样的事情，但你要求具体案例）实际上这是必须这样做的
我看到你们在使用@angular/material，即使在他们使用的网站中也是如此。我会尝试改用那个包并告诉你。
相当公平，但没关系。这是另一个问题的答案）无论如何，如果它有帮助我很高兴

【解决方案2】：

好的，回答您的问题，我重新创建了您的案例，一切正常。所以我会提供步骤，也许你错过了什么。

创建的模块；
向其导入 materialModule，添加到导入中；
导入需要的组件，添加做声明；
将所有模块导入app.module 并添加到BrowserAnimationsModule,BrowserModule 之后的导入中。
在我的 html 中创建了一些 mat 组件，所有这些都为我工作。

【讨论】：

好吧，如果您确定这是正确的方法，谢谢您的回答。我会试着弄清楚我错过了什么:)