web-dev-qa-db-ja.com

angularアニメーションをHost要素に追加する

ホストにアニメーションを追加しました

@Component({
   ....,
   animations: [
      trigger('slideIn', [
          ...
      ])
   ],
   Host: {
      '[@animation]': 'condition'
   }
}

これはうまくいきましたが、コンパイル時にこれは非推奨であり、@ HostBindingを使用する必要があると言われました...

@HostBinding('[@animation]') get slideIn() {
   return condition;
}

それは私にエラーを投げます

Can't bind to '[@animation' since it isn't a known property of 'my-component-selector'.

しかし、モジュールにアニメーションを追加することはできません。

angularanimationangular-animations
20
Oliver Renner

@HostBinding()では角括弧は不要です

_@HostBinding('@slideIn') get slideIn() {
_

@HostBinding()と@HostListener()の2つのデコレータがあるため、_()_と_[]_を区別する必要はありませんが、_Host: [...]_を使用する場合はそうです。 。

34
Günter Zöchbauer

私は構文に少し苦労し、ダミーの例が好きなので、私はこの答えを書いていますが、ギュンターの答えは正しいです。

私がしなければならなかったこと：

@Component({
    selector: 'app-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.component.scss'],
    animations: [
        trigger('toggleDrawer', [
            state('closed', style({
                transform: 'translateX(0)',
                'box-shadow': '0px 3px 6px 1px rgba(0, 0, 0, 0.6)'
            })),
            state('opened', style({
                transform: 'translateX(80vw)'
            })),
            transition('closed <=> opened', animate(300))
        ])
    ]
})
export class SidenavComponent implements OnInit {

    private state: 'opened' | 'closed' = 'closed';

    // binds the animation to the Host component
    @HostBinding('@toggleDrawer') get getToggleDrawer(): string {
        return this.state === 'closed' ? 'opened' : 'closed';
    }

    constructor() { }

    ngOnInit(): void {
    }

    // toggle drawer
    toggle(): void {
        this.state = this.state === 'closed' ? 'opened' : 'closed';
    }

    // opens drawer
    open(): void {
        this.state = 'opened';
    }

    // closes drawer
    close(): void {
        this.state = 'closed';
    }

}
1
David Prieto