角度步进器答案

【问题标题】：Angular stepper角度步进器
【发布时间】：2020-09-18 05:47:50
【问题描述】：

我有一个步进组件。在 stepper-component.html 中，我有四个组件作为 mat-steps 像这样 -

<div class="container-fluid">
  <mat-horizontal-stepper linear #stepper>
    <mat-step label="Step1">
      <component-1></component-1>
    </mat-step>
    <mat-step label="Step2">
      <component-2></component-2>
    </mat-step>
    <mat-step label="Step3">
      <component-3></component-3>
    </mat-step>
    <mat-step label="Step4">
      <component-4></component-4>
    </mat-step>
  </mat-horizontal-stepper>
</div>

我想通过单击不同组件中的按钮来访问组件2，比如组件X，并在组件2中执行一些功能。我该怎么做？

【问题讨论】：

您可以使用单例服务和主题来通知其他组件某些事情，但是您应该真正考虑一下为什么必须让步进器组件在它们应该是分开的时候相互干扰。
@MikeS。其实我有两个业务需求。我必须使用步进器，因为组件是一种大形式。因此，在填写表格方面有更好的用户体验。其次，我有一个条件，如果用户想稍后编辑任何保存的表单，他可以在不同的视图中对表单磁贴使用按钮，然后进入步进器组件中的第二个组件。现在的问题是我没有在任何地方对四个组件使用任何路由。我只是将路由用于步进组件。我只是想以某种方式到达第二个组件，也许使用它的索引。

标签： angular angular-material-stepper

【解决方案1】：

您可以使用@Input() / @Output() 或者您可以在您的componentX 中导入component2 并调用该方法。例如在您的 componentX 中：

constructor(private component2: Component2) {}

clickMethod() {
    this.component2.method();
}

【讨论】：

错误：未捕获（承诺中）：NullInjectorError: R3InjectorError(AppModule)[Component2 -> Component 2-> Component2]: NullInjectorError: No provider for Component2！ .Getting this声明 Component2 时，构造函数中的 ComponentX 出错
在您的组件中添加providers。 ``` @Component({ templateUrl: "", styleUrls: [""], providers: [Component2] }) ``