Динамическое присвоение нескольких значений Angular Animation @Trigger внутри элемента html с использованием Typescript - PullRequest
Новая
       32

Динамическое присвоение нескольких значений Angular Animation @Trigger внутри элемента html с использованием Typescript

0 голосов
/ 01 ноября 2018

Этот вопрос о том, как мы можем динамически назначать более двух значений для триггера угловой анимации @openClose внутри элемента html.

На основе угловых документов https://angular.io/guide/transition-and-triggers,

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p> Some content </p>
</div>

Приведенный выше шаблон позволяет присваивать переменным isOpen только одно из двух, открытых или закрытых значений, и, следовательно, мы можем назначить одно из МАКСИМАЛЬНЫХ двух значений в состояние триггера.

Мое требование состоит в том, чтобы в моем «родительском» контейнере было много таких IDENT элементов div «children», и мне нужно иметь возможность выполнять итерацию / цикл по каждому дочернему элементу с использованием Typescript и DYNAMICALLY передавать другое значение State (из длинный список различных значений 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) случай на ЛЮБОМ из детей будет выполнять следующие три вещи одновременно:

  1. назначить новое 'State' из массива состояний всем дочерним элементам,
  2. первые дети сверху будут удалены из родительского контейнер, присваивая ему состояние удаления, которое в основном исчезнет, ​​
  3. НОВЫЕ идентичные дочерние элементы добавляются внизу внутри родительского контейнера.

Я все еще изучаю базовый язык и пытаюсь написать код, который будет выполнять именно это.

Основная задача - выяснить, как я могу использовать Typescript, чтобы назначить более двух разных значений триггеру [@openClose] внутри каждого дочернего элемента, учитывая мои ограничения выше.

...