Angular 角度如何延迟/错开子组件内部的动画

我有一个带有动画的子组件

子组件.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }

...
<child></child>
<child></child>
...

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }

还有一个父组件，在html中有两个子组件

parent.component.hmtl.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }

...
<child></child>
<child></child>
...

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }

x是一个变量，每个子组件都会增加。 我觉得这个解决办法有点乱

EDIT3:到目前为止，答案或多或少就是我在第二次编辑中提到的解决方案。虽然这些工作，我仍然认为这些作为解决方案。 我正在寻找一个只涉及父组件的解决方案，因此子组件应该保持与中类似的方式。这些不是唯一的选项，但我知道这些选项。角度7兼容

选项1：主机绑定和状态 在子组件中，将动画状态声明为主体绑定

@HostBinding('@animationState') animstate : string = 'preanimationstate';

然后使用子组件中的正常输入来获得延迟：

@Input('delay') delay : number;

像这样传递延迟：

<child-component [delay]="500"></child-component>

推理：

看起来，动画儿童也可以是您的救星，但这种方式非常直接和简单。希望能有帮助

选项2：将动画移动到HostComponent并手动应用状态 您还可以将动画定义（如果使用状态和转换）从child.component.ts移动到parent.component.ts，然后使用如下初始状态修改器关闭所有子组件：

<child [@animstate]="initial"></child>>

>

然后通过查看子对象获取元素：

@ViewChildren(ChildComponent) childComponents as QueryList<ChildComponent>;

@ViewChildren（ChildComponent）childComponents作为QueryList；

---

这可以通过AfterViewInit访问。使用for/each循环和

窗口在after view init中应用您的状态。setTimeout

函数。

以防万一有人再次发现这个问题：如果您希望两个动画同时播放，只需使用

组

和

animateChild

。基本上，在第一篇文章中链接的plunker中，您必须用以下内容替换

outerTransition

：

const outerTransition = transition('void => *', [
  style({opacity: 0}),
  group([
    animate(2000, style({opacity: 1})),
    query('@inner', [
      animateChild()
    ]),
  ]),
]);

---

根据动画功能中的角度文档

第二个参数delay的语法与duration相同。对于 例如：

等待100毫秒，然后运行200毫秒：“0.2秒100毫秒”

通读

我们的目标是传递第二个参数

animate('2000ms {{delay}}ms'

<p [@childAnimation]="{value:'',params:{delay:delay}}">
    IIIIIIIIIIIIIIIIII
</p>

首先，让我们将输入参数添加到子组件，以便我们可以接受来自父组件的输入值：

export class ChildComponent implements OnInit {
  @Input() delay: number = 0;
  constructor() { }    
}

现在，让我们从父组件传递参数值

<p>child1</p>
<app-child [delay]="0"></app-child>

<p>child2</p>
<app-child [delay]="1000"></app-child>
<p>child2 should have a delay</p>

现在一切都好了，你现在应该延迟输入了

---

你能创建stackblitz演示吗？我添加了一个stackblitz演示。他的答案并没有完全满足我的期望（见编辑3），但它很有效，看起来是最干净的one@Flyii根据您的edit3，上述解决方案与父解决方案配合使用，我不确定您的意思。您的解决方案将输入引入子组件并使用它修改其动画。我希望找到一个类似于这个不起作用的示例的解决方案：@Flyii据我所知，这是不可能的，问题是您不知道有多少指令被重用。