angular - 属性绑定(bind)时 View 文件中 "@"符号的用途是什么？

@Component({
  selector: 'app-hero-list-basic',
  template: `
<ul>
  <li *ngFor="let hero of heroes"
      [@heroState]="hero.state"
      (click)="hero.toggleState()">
    {{hero.name}}
  </li>
</ul>`,

我尝试了 Angular 动画，但效果很好，我不了解此模板部分，为什么他们在 View 的触发器前面使用@符号。

文件:here

最佳答案

那是用来触发 animations 的，它会在需要时从样式文件中加载 specific styles ，

在上面的代码中，当变量 heroState 为 inactive 时，它将在动画中加载特定样式

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

关于angular - 属性绑定(bind)时 View 文件中 "@"符号的用途是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51668284/