Question

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

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

文档：here

Answer 1

它用于触发 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'))
  ])
]

Answer 2

如果没有“ @”，则将值绑定到组件。

使用“ @”表示变量（在本示例中为heroState）是一个动画状态，而不是值绑定，它将触发您声明的动画。

Answer 3

我猜想@是html模板中有角的某种转义字符。此处表明它不是有界值，而是动画状态。

属性绑定时视图文件中“ @”符号的用法是什么？

3 个答案: