什么是Angular合成属性？

Question

什么是Angular合成属性？

angulartypescriptpropertiesangular-animationssynthetic

9

最近，在开发动画组件时，我遇到了“合成属性”的术语。

<bmx-panel [@sidebarState]="state">

  <i bmxPanelHeader (click)="toggle($event)"
     class="fa fa-angle-double-right fa-lg"></i>
  ...    
</bmx-panel>

在我的情况下，合成属性[@sidebarState]="state"触发了我的组件的展开/折叠动画，当toggle函数更改state属性时。 trigger方法的第一个参数是相应合成属性@sidebarState的名称。

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('sidebarState', [
      state('expanded', style( { width: '240px' } )),
      state('collapsed', style({ width: '40px' })),
      transition('expanded => collapsed', animate('350ms ease-in')),
      transition('collapsed => expanded', animate('350ms ease-out'))
    ])
  ]
})
export class SidebarComponent  {  
  public state = 'expanded';

  constructor() {}

  toggle(event: any) {    
    this.state = this.state === "expanded" ? "collapsed" : "expanded";  
  }
}

关于合成属性的信息在谷歌搜索中并不多见。角度文档中也没有提到任何内容。是否有人对这个概念有更深入的了解？

- zgue

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SeanStanden · Accepted Answer

它被称为合成属性，因为它看起来像是一个Angular属性，但在常规意义上并不像一个。这个术语仅仅是描述性的。