Angular 2 材料步进器不工作

Question

嗨，我正在处理一个 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: 

我能够使用很多材料模块。 唯一的问题是这个。 有什么想法吗？ 提前致谢。

Answer 1

您确定正确导入模块吗？ 确保在您的app.module.ts ，您导入了MatStepperModule而不是MaterialModule （已从2.0.0-beta.11删除，请参见此处）：

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

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

它不起作用的原因是因为 stepper 组件是2.0.0-beta.11 （有关更多信息，请参阅更改日志，如上所述，删除MaterialModule ）

Answer 2

问题是，我将 Angular bootstrap 与 Angular 材料一起使用。 他们似乎不合作。 这似乎是它从来没有对我有用的原因。

而不是mat-stepper使用mat-horizontal-stepper 。

Answer 3

我也有这个问题。

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

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

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