2017-11-30 3 views
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検索では、合成プロパティに関する多くの情報が表示されません。角の書類には何も言及されていません。誰もがこのコンセプトでより多くの洞察を持っていますか?

答えて

0

Angularプロパティのように見えますが、常識的には動作しないため、合成されています。この用語は単に説明的なものです。

+0

自分で合成プロパティを作成するにはどうすればよいですか? – zgue

+0

私は知らない:) – SeanStanden

関連する問題