Динамическое присвоение нескольких значений Angular Animation @Trigger внутри элемента html с использованием Typescript
Этот вопрос о том, как мы можем динамически назначать более двух значений для триггера угловой анимации @openClose внутри элемента html.
На основании угловых документов https://angular.io/guide/transition-and-triggers,
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
<p> Some content </p>
</div>
Приведенный выше шаблон позволяет присваивать переменным isOpen только одно из двух, открытых или закрытых значений, и, следовательно, мы можем назначить одно из МАКСИМАЛЬНЫХ двух значений состоянию Trigger.
Мое требование состоит в том, чтобы в моем "родительском" контейнере было много таких элементов div "ID" IDENTICAL, и мне нужно иметь возможность выполнять итерацию / цикл для каждого дочернего элемента, используя Typescript и DYNAMICALLY передавать другое значение состояния (из длинного списка различных значений State, доступных в строковом массиве) для каждого дочернего триггера @OpenClose... (INSTEAD от использования обычно используемого выражения isOpen? open': 'closed'', где мы можем передать только одно из двух 'состояний' возможный).
<div class="parent">
<div [@openClose] class="children"> <p> Some content </p> </div>
<div [@openClose] class="children"> <p> Some content </p> </div>
<div [@openClose] class="children"> <p> Some content </p> </div>
<div [@openClose] class="children"> <p> Some content </p> </div>
<div [@openClose] class="children"> <p> Some content </p> </div>
<div [@openClose] class="children"> <p> Some content </p> </div>
</div>
- У всех моих детей будет один и тот же класс и структура, НО не может быть никакого способа для индивидуальной идентификации одного из других детей... поэтому нет идентификаторов элементов или имен отдельных классов - это потому, что мы не хотим отслеживать каждый отдельный идентификатор элемента.
- Каждому "потомку" во время создания будет динамически назначаться отдельное "состояние" (которое будет определять его внешний вид, цвет, размер и т. Д.) Из нашего массива состояний строк.
- Каждое из "состояний" определяется в определении триггера угловой анимации с соответствующими свойствами css для внешнего вида детей.
- Я не могу использовать [@openClose]="isOpen" для этих идентичных потомков, потому что изменение значения isOpen для одного потомка назначит это же значение всем потомкам. Поэтому мне действительно нужно просто пройтись по каждому дочернему элементу, а затем с помощью JS назначить разное значение каждому дочернему элементу [@openClose].
КАЖДЫЙ (onclick) случай на ЛЮБОМ из детей будет делать следующие три вещи одновременно:
- назначить новое "State" из массива состояний всем дочерним элементам,
- первые дочерние элементы в верхней части будут удалены из родительского контейнера путем присвоения ему состояния удаления, которое в основном исчезнет,
- НОВЫЕ идентичные дочерние элементы добавляются внизу внутри родительского контейнера.
Я все еще изучаю основы Angular и борюсь с тем, как написать код для выполнения именно этого.
Основная задача состоит в том, чтобы выяснить, как я могу использовать Typescript, чтобы назначить более двух разных значений триггеру [@openClose] внутри каждого дочернего элемента, учитывая мои ограничения выше.