javascript - 动画(展开，折叠)子组件以及父组件 [Angular5]

Question

我想在 Angular 5 中实现这个(引用附图)

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

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

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

Answer 1

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

如果你想将数据从 parent 传递给 child ，你可以简单地使用 @Input 来完成，如下所示:

首先你需要使用Input导入你的子组件

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

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

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

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

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

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

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

希望这有帮助!!!