Angular 5 如何在组件中启动动画（Ionic 3）

Question

我正在使用 Angular 5 和 Ionic 3。 我正在尝试在我的项目中使用 Angular 动画。 我当前的项目有一个主 html 页面和一个嵌套在里面的角度组件。

问题是.. 我不知道如何从主页的按钮触发组件上的动画。 我的主页按钮需要在使用角度选择器呈现的组件文本上触发角度动画。

这是我的主要 html 文件。

<component1></component1>

<button (click)="startAnimations()">Trigger animation!</button>

和我的主要打字稿文件：

export class AppComponent {
  clickInfo = 'default';
  startAnimations() {
    this.clickInfo = 'clicked';
    setTimeout(() => {
      this.clickInfo = 'default';
    }, 10000);
  }
}

这是我的组件 html 文件，其中包含需要动画的内容。 这个 div 需要通过从主 html 中单击按钮来设置动画：

<div [@clickedState]="clickInfo"></div>

这是我的动画 ts，它已正确导入到主打字稿文件中。

import { trigger, state, style, transition, animate } from '@angular/animations';


export const clickedStateTrigger = trigger('clickedState', [
    state('default', style({
      backgroundColor: 'orange',
      width: '100px',
      height: '100px',
      margin: '20px',

    })),
    state('clicked', style({
      backgroundColor: 'blue',
      width: '300px',
      height: '500px',
      margin: '20px',

    })),

    transition('default => clicked', animate('200ms 500ms ease-in')),
    transition('clicked => default', animate(300))
  ])

有什么想法吗？或类似的东西的github例子？ 我当前的项目不会在组件中触发动画。我猜这主要是因为主页的点击功能无法访问组件。

提前致谢，

Answer 1

您正在寻找@Input()。

添加到component1:

<component1 [clickInfo]="clickInfo"></component1>

<button (click)="startAnimations()">Trigger animation!</button>

添加到您的 component1.ts 文件：

@Input('clickInfo') clickInfo: string;

详细了解组件交互：https://angular.io/guide/component-interaction

了解如何使用带有动画的通用路由器插座： Animating routes in angular 4