web-dev-qa-db-fra.com

ajout d'une animation angular à un élément Host

j'ai ajouté une animation à l'hôte via

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

qui a bien fonctionné, lors de la compilation, on m'a dit que c'était obsolète et que je devrais utiliser @HostBinding ...

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

ce qui me jette une erreur

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

mais je ne peux pas ajouter d'animation dans mon module .. que puis-je faire?

angularanimationangular-animations
20
Oliver Renner

Les crochets ne sont pas nécessaires avec @HostBinding()

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

Il y a deux décorateurs @HostBinding() et @HostListener() donc la distinction entre () Et [] N'est pas nécessaire, alors que c'est quand Host: [...] est utilisé.

34
Günter Zöchbauer

J'écris cette réponse parce que j'ai eu un peu de mal avec la syntaxe et j'aime les exemples pour les nuls, mais la réponse de Günter est correcte.

Ce que je devais faire:

@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