Question

我正在构建输入表单应用程序。该应用程序有2个视图（桌面或移动/平板电脑）。如果有人开始输入响应并且视图改变了，我希望在该视图中打开当前步骤。

在寻求帮助之前，我已经花了几天时间解决这个问题。

我有一个父组件，其中2个表示组件分别代表水平视图和垂直视图。对于每个视图，我从演示文稿向父级发出MatStepper <>类的selectedIndex属性，该父级传播到另一侧。

在尝试解决此问题时，在监视控制台时，单击每个步骤时都会记录selectedIndex。令人莫名其妙的是，当我向后浏览步进器时，selectedIndex编号不会向后偏移，它会增加，从而使编程变得困难。

在父组件上，我创建了一个可观察的对象，以包含子组件发出的selectedIndex，因此侦听发出的事件的函数将具有正确的编号。我已经走了这么远。当前的实现将在顶部菜单中显示同步工作。（1-2-3-4）

单击底部的步进按钮，没有错误，同步中断（3-2-1）。返回到顶部菜单（1（同步中断），开始出现（2）错误。即，该错误涉及底部步进器无法设置MatStepper类内部的属性。

如果我为底部菜单传播实现了相同的代码，而该代码当前可用于顶部菜单，则不起作用，但会创建一个循环的发射数据。

在撰写本文时，我考虑过从父级发射到子级来控制导航。我知道我的逻辑在实现中是错误的，因为console.log没有触发。

看看StackBlitz

上的代码

我希望您能得到任何有关使双向同步正常工作的指导。

或者告诉我是否期望在这里完成很多工作，并且不同步这些步骤。

谢谢。

Answer 1

似乎您在此处编写了很多代码来尝试解决该问题。

我将从简单的父组件开始：

app.component.html

<app-demo [(index)]="currentIndex"></app-demo>
<app-demo2 [(index)]="currentIndex"></app-demo2>

app.component.ts

@Component({
  ...
})
export class AppComponent {
  currentIndex: number = 0;
}

现在让我们回到DemoComponent。

demo.component.html

<mat-vertical-stepper [selectedIndex]="index"
  (children)="move($event)" (selectionChange)="move($event.selectedIndex)">
 ...

demo.component.ts

@Component({
  ...
})
export class DemoComponent {
  @Input() index: number;

  @Output() indexChange = new EventEmitter();

  move(index: number) {
    this.index = index;
    this.indexChange.emit(this.index)
  }
}

Demo2Component具有相同的代码。

Stackblitz Example

同步多个角度步进器

1 个答案: