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

Question

我想在 Angular 5

中实现这个（参考附图）

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

User-Layout组件已经在Role组件的开头使用。我可以使用动画展开和折叠父组件，但无法同时对子组件执行相同操作。

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

Answer 1

看看animateChild()方法。

摘自 post post 由 @angular/animations 作者 Matias Niemelä 撰写的关于 animateChild()

的博客

Now what about the situation when there is an element in the application that has an animation ready-to-go, but a parent animation runs instead? Is there a way that the parent animation can dictate when the child animation runs, how long it runs for or if it doesn't run at all? [...]

If these animations trigger at the same time then the parent animation will always win and the child animation will be skipped. However, using animateChild we can have the parent animation query into the child and tell it when it's allowed to animate:

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 }))
])

Answer 2

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

如果您想将数据从父级传递给子级，您只需使用 @Input 即可，如下所示：

首先您需要使用

将 Input 导入到您的子组件中

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

然后你需要在子组件中声明一个@Input变量

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

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

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

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

这就是您需要做的所有事情，您需要动画代码，它将在 parentVariable 变量发生变化时触发。

希望对您有所帮助！！！！

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

Animate (Expand,collapse) child component along With parent component [Angular5]

javascript

angular

angular5

angular-animations