4
最近、アニメーションコンポーネントを開発しているうちに、私はsynthetic property
という言葉に出会った。角合成特性とは何ですか?
<bmx-panel [@sidebarState]="state">
<i bmxPanelHeader (click)="toggle($event)"
class="fa fa-angle-double-right fa-lg"></i>
...
</bmx-panel>
state
プロパティはtoggle
関数によって変更されたときに私の場合は合成性[@sidebarState]="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";
}
}
Google検索では、合成プロパティに関する多くの情報が表示されません。角の書類には何も言及されていません。誰もがこのコンセプトでより多くの洞察を持っていますか?
自分で合成プロパティを作成するにはどうすればよいですか? – zgue
私は知らない:) – SeanStanden