1

Angular 有一个名为CdkStepper的“步进器”实现，它非常强大。基本上，CdkStepper 具有实现步骤的CdkStep DOM 子节点，并且很聪明地通过“下一个”和“上一个”事件在步骤之间推进。我需要编写一个多级步进器，如下所示：

<my-stepper>
    <my-step>Hi there</my-step>
    <my-stepper>
        <my-step>How's it going?</my-step>
        <my-step>Good?</my-step>
    </my-stepper>
</my-stepper>

在哪里my-stepper延伸CdkStepper和my-step延伸CdkStep。（那里缺少很多东西，但这抓住了要点。）阻止我的是这样CdkStepper做：

@ContentChildren(CdkStep, {descendants: true}) _steps: QueryList<CdkStep>;

而不是这个：

@ContentChildren(CdkStep) _steps: QueryList<CdkStep>;

这意味着顶层步进器会抓取从它下降的整个 DOM 树中的所有步骤。所以在这种情况下，它就像我说的那样：

<my-stepper>
    <my-step>Hi there</my-step>
    <my-stepper>
        <my-step>How's it going?</my-step>
        <my-step>Good?</my-step>
    </my-stepper>
    <my-step>How's it going?</my-step>
    <my-step>Good?</my-step>
</my-stepper>

这不太理想。我看过的解决方案包括：

  • 我可以写一些特别的东西来复制大部分内容CdkStepper。（糟糕的想法。）
  • 我可以复制整个实现，然后只改变一件事。（几乎一样可怕。）
  • 我可以找到一种方法来覆盖CdkStepper.

一件事是行不通的；你不能在装饰器参数中有一个实例变量（所以我不能做类似的事情：

@Input() descendants = false;
@ContentChildren(CdkStep, {descendants: this.descendants}) _steps: QueryList<CdkStep>;

因为装饰器适用于类，而不是实例，因此this在这种情况下毫无意义。

那么我应该在这里做什么？有没有一种方法可以extends用来覆盖最小值并获得我想要的行为？还有什么？处理这种情况的最佳实践方法是什么？

4

1 回答 1

0

我认为您可以像这样将嵌套的步进器包装在一个组件中。

<my-stepper>
    <my-step>Hi there</my-step>
    <my-stepper-wrapper>
    </my-stepper-wrapper>
    <my-step>How's it going?</my-step>
    <my-step>Good?</my-step>
</my-stepper>

在 MyStepperWrapper 中

<my-stepper>
    <my-step>How's it going?</my-step>
    <my-step>Good?</my-step>
</my-stepper>
于 2020-06-25T08:19:47.417 回答