Angular 2 材料步进器不工作答案

【问题标题】：Angular 2 material Stepper is not workingAngular 2 材料步进器不工作
【发布时间】：2017-11-01 01:53:39
【问题描述】：

您好，我正在开发一个 Angular 2 项目并经常使用材料模块。由于某种原因，我什至无法将 Stepper 模块导入我的项目。所以我最终导入了整个材料模块，如下所示：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { StepperComponent } from './stepper.component';
import { MaterialModule } from '@angular/material';


@NgModule({
  imports: [CommonModule, MaterialModule],
  declarations: [StepperComponent],
  exports: [StepperComponent]
})

export class StepperModule {}

我在我的html中使用它来测试它的导入

<mat-horizontal-stepper></mat-horizontal-stepper>

然后我收到以下错误，

polyfills.dll.js:24743 Unhandled Promise rejection: Template parse errors:
'mat-horizontal-stepper' is not a known element:
1. If 'mat-horizontal-stepper' is an Angular component, then verify that it is part of this module.
2. If 'mat-horizontal-stepper' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-horizontal-stepper></mat-horizontal-stepper>"): t@0:0 ; Zone: <root> ; Task: Promise.then ; Value:

我可以使用很多材料模块。只有这个有问题。有什么想法吗？提前致谢。

【问题讨论】：

发布您的 app.module.ts 代码。你在 StepperComponent 中使用吗？
是的，正如我的问题中提到的，我正在使用<mat-horizontal-stepper>。与app.module.ts 无关，因为StepperModule 正在导入材料模块。
步进器组件从2.0.0-beta.11引入，结束对MaterialModule的支持。 （您甚至阅读过更新日志吗？？）

标签： angular angular-material

【解决方案1】：

您确定正确导入了模块吗？确保在您的 app.module.ts 中，您已导入到 MatStepperModule 和 NOT MaterialModule（已从 2.0.0-beta.11 中删除，请参阅 here）：

import { MatStepperModule } from '@angular/material';

@NgModule({
    imports: [
        MatStepperModule,
        // ...
    ]
})

它不起作用的原因是步进器组件是 2.0.0-beta.11 的新增组件（有关更多信息，请参阅 changelog ，如上所述，删除了 MaterialModule）

【讨论】：

【解决方案2】：

我也有这个问题。

我的原因是我正在阅读 Angular Material 12.1.1 的文档，该文档建议将 mat-stepper 组件选择器与方向绑定一起使用。

在我的项目中，我实际上使用的是 Angular Material 9.2.4，它使用了旧组件 mat-horizontal-stepper 选择器。

因此，请尝试对照文档的相关版本检查您正在使用的 Angular Material 版本，

【讨论】：

【解决方案3】：

问题是，我使用 Angular 引导程序和 Angular 材料。他们似乎没有互相合作。这似乎是它对我不起作用的原因。

用mat-horizontal-stepper代替mat-stepper。

【讨论】：