Question

我想在Angular 5中实现这一点（参考附图）

有两个组件用户布局和角色

用户布局组件已在角色组件的开头使用。我可以使用动画展开和折叠Parent组件，但无法同时为子组件执行相同的操作。

以任何方式从父组件触发子组件上的动画。

Answer 1

对于子组件和父组件之间的通信，您可以使用@Input，@Output和EventEmitter。

如果您想将数据从父级传递给子级，则只需使用@Input执行此操作，如下所示：

首先，您需要使用

将Input导入您的子组件

import { Component, Input } from '@angular/core';

然后，您需要在子组件中声明@Input变量

export class ChildComponent {
  @Input() parentVariable: string;
}

然后在您的父级中使用子组件时，您需要将varible指定为属性，如下所示

<child-component [parentVariable]="parentData"></child-component>

您的父组件中应该有parentData声明，其更改将反映在子组件@Input变量parentVariable中。

这就是你需要做的所有事情，你需要动画代码，这将触发更改parentVariable变量。

希望这有助于!!!!

Answer 2

查看animateChild()方法。

摘自@angular/animations作者MatiasNiemelä发表的关于animateChild()

的博客文章

现在，当应用程序中有一个动画准备就绪，但运行父动画时会出现什么情况呢？有没有一种方法可以让父动画在子动画运行时，运行多长时间或者根本不运行？   [...]

如果这些动画同时触发，则父动画将始终获胜并且将跳过子动画。但是，使用animateChild，我们可以将子动画查询到子项中并告诉它何时允许动画：

Sub Animations With animateChild

<强> component.html

<!-- do these two guys animate at the same time? -->
<div [@parent]="parentVal">
  <div [@child]="childVal">
    ...
  </div>
</div>

<强> component.animations

trigger('parent', [
  style({ transform: 'translate(-100px)' }),
  animate('500ms',
    style({ transform: 'translate(0px)' })),
  query('@ child', animateChild())
]),
trigger('child', [
  style({ opacity:0 }),
  animate('0.5s', style({ opacity:1 }))
])

动画（展开，折叠）子组件以及父组件[Angular5]

2 个答案: