属性 'currentState' 在类型 'FadeblockComponent' 上不存在

Question

我正在 Angular 中处理动画，并且运行遇到块不会淡出的问题。
HTML 在淡块中：

<div class="fadeBlock mx-auto" [@changeState]="currentState"></div>

组件文件：

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

import { fadeAnimation } from '../animations';

@Component({
selector: 'app-fadeblock',
templateUrl: './fadeblock.component.html',
styleUrls: [ './fadeblock.component.scss' ],
 animations: [
trigger('changeState', [
  transition('void => *', [
      useAnimation(fadeAnimation, {
          params: {
              delay: '1000ms',
              from: 1,
              to: 0,
              time: '1s'
          }
      })
  ])
  ])
  ]
})
export class FadeblockComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}

和 fadeAnimation:

import {
animation, trigger, animateChild, group,
transition, animate, style, query
} from '@angular/animations';


export const fadeAnimation = animation([
style({
    opacity: '{{ from }}'
}),
animate('{{ time }} {{ delay }} ease-in-out', style({
    opacity: '{{ to }}'
})),
]);

如果我更改 css 文件中的不透明度，该块将只停留而不会移动。运行ning ng serve 时没有出现错误，但是当我尝试运行 ng build --prod 时出现错误在我尝试学习 Angular.

时，非常感谢任何帮助

Answer 1

需要在FadeblockComponent中定义一个currentState属性来改变动画状态

export class FadeblockComponent implements OnInit {

    currentState; // it is null since you set transition from void to *

    constructor() { }

    ngOnInit() {
       this.currentState = 'entered'; // or whatever the state you want since you set ending transition to *
    }

}

这是一个有效的 stackblitz 项目：https://stackblitz.com/edit/angular-cjyblw

属性 'currentState' 在类型 'FadeblockComponent' 上不存在

Property 'currentState' does not exist on type 'FadeblockComponent'

angular

angular-animations