同步多个 angular 个步进器

Question

我正在构建一个输入表单应用程序。该应用程序有 2 个视图（桌面或 mobile/tablet）。如果有人开始输入响应并且视图发生变化，我希望在该视图中打开当前步骤。

为了这个问题绞尽脑汁几天，才来求助。

我有一个父组件，其中有 2 个表示水平和垂直视图的表示组件。对于每个视图，我将 MatStepper<> class 的 selectedIndex 属性从演示文稿发送到父级，然后传播到另一侧。

当我尝试解决这个问题时，监视控制台，我在单击每个步骤时记录 selectedIndex。令人困惑的是，当我通过步进器向后移动时，selectedIndex 数字不会向后移动，而是会增加，从而使编程变得困难。

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

单击底部步进器按钮，无错误，同步中断 (3-2-1)。返回顶部菜单（1（同步中断），(2) 错误开始。即错误处理底部步进器无法设置 MatStepper class 内部的属性。

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

在我写这篇文章时，我考虑过从父级发送到子级以控制导航。我知道我的逻辑在实现中是错误的，因为 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

同步多个 angular 个步进器

Sync multiple angular steppers

events

user-interface

angular-material2

angular