Как мне переопределить отдельный элемент реализации Angular Компонента (в частности, CdkStepper)? - PullRequest
Новая
       80

Как мне переопределить отдельный элемент реализации Angular Компонента (в частности, CdkStepper)?

1 голос
/ 27 мая 2020

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>

, что далеко не идеально. Я рассмотрел следующие решения:

  • Я мог бы написать что-нибудь ad ho c, которое копирует большую часть того, что делает CdkStepper. (Ужасная идея.)
  • Я мог бы скопировать всю реализацию и просто изменить одну вещь. (Почти так же ужасно.)
  • Я мог бы найти способ переопределить только проблемные c части CdkStepper.

Единственное, чего не работа; у вас не может быть переменной экземпляра в аргументе декоратора (поэтому я не мог сделать что-то вроде: 

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

, потому что декоратор применяется к классу, а не к экземпляру, и поэтому this бессмысленно в в этом контексте.

Итак, что мне здесь делать? Есть ли способ использовать extends, чтобы просто переопределить минимум и получить желаемое поведение? Что-то еще? Как лучше всего подойти к ситуации вот так?

1 Ответ

0 голосов
/ 25 июня 2020

Думаю, вы можете обернуть вложенный степпер в компонент, вот так. 

<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>
...