У меня есть дочерний компонент с анимацией
child.component.ts
@Component({
selector: 'child',
animations:[
// animations
]
})
export class ChildComponent { ... }
И родительский компонент, который имеет 2 дочерних компонента в HTML
parent.component.hmtl.ts
...
<child></child>
<child></child>
...
Чего я хочу добиться, так это ошеломить анимацию дочерних компонентов в родительском компоненте. Поэтому второй дочерний компонент должен запустить анимацию через X секунд.
Похоже, что animateChild() может работать, но я не могу понять, как его использовать. Это правильное решение? Если так, то пример был бы действительно полезен.
заранее спасибо
РЕДАКТИРОВАТЬ: animateChild(), кажется, не работает для этого случая. Очевидно, он работает только с анимациями, которые определены в родительском компоненте.
РЕДАКТИРОВАТЬ 2: Я думаю, что может быть обходной путь, добавив задержку для анимации внутри дочерних компонентов.
child.component.ts
@Component({
selector: 'child',
animations:[
animate(x),
// animations
]
})
export class ChildComponent { ... }
X будет переменной, которая будет увеличиваться для каждого дочернего компонента. Этот обходной путь выглядит мне немного грязно
РЕДАКТИРОВАТЬ 3: ответы до сих пор являются более или менее решением, которое я упомянул во втором моем редактировании. Хотя они работают, я все равно считаю их обходными путями.
Я ищу решение, которое включает только родительский компонент, поэтому дочерний компонент должен оставаться таким же, как в этом нерабочем примере