Angular 5如何在组件中启动动画(Ionic 3)

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

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

这是我的主html文件。

<component1></component1>

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

和我的主typescript文件:

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

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

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

这是我的动画ts,它被正确地导入到主typescript文件中。

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示例? 我的当前项目不会触发组件中的动画。。我想这主要是因为主页的点击功能无法访问组件。

提前感谢,