以編程方式進行角度影片，如何在ngOnDestroy之前呼叫影片生成器進行離開影片-有解無憂

該賞金過期5天。這個問題的答案有資格獲得 50聲望獎勵。歡濤想引起更多人對這個問題的關注。

在 html 中，我有 ngIf 來控制顯示或銷毀抽屜組件。我想使用 AnimationBuilder 為抽屜動態呼叫我的影片。所以我在父組件（應用程式組件）中使用了影片構建器，在將 slideIn 影片應用于抽屜時效果很好。但是我想在抽屜組件從 DOM 移開時應用 slideOut 影片。它不起作用，因為在我的影片完成之前呼叫了 ngOnDestroy。

請注意，我知道:leave :enter可能會起作用，但我想知道這是否可以專門用于 AnimationBuilder。問題是我不知道如何在 ngOnDestroy 之前播放影片。

這是帶有 ngIf 的 html 來控制顯示或銷毀抽屜

<app-drawer #drawer *ngIf="showDrawer"></app-drawer>

我的應用組件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'angular-test';
  showDrawer = false;
  // @ts-ignore
  player: AnimationPlayer;

  // @ts-ignore
  @ViewChild('drawer', { read: ElementRef }) drawer: ElementRef;

  constructor(
    private animationBuilder: AnimationBuilder,
    private cdr: ChangeDetectorRef
  ) {}

  toggleDrawer(): void {
    this.showDrawer = !this.showDrawer;
    this.runSlideAnimation(this.showDrawer);
  }

  runSlideAnimation(showDrawer: boolean): void {
    if (showDrawer) {
      // to make sure element is on dom by ngIf change before I apply animation
      this.cdr.detectChanges();
    }
    if (this.player) {
      this.player.destroy();
    }
    const factory = this.animationBuilder.build(
      showDrawer ? slideInAnimation : slideOutAnimation
    );
    this.player = factory.create(this.drawer.nativeElement);
    this.player.play();
    // My thoughts was manually update dom when slideout animation finish so angular will call
    // ngOndestroy after my animation is done. it didn't work
    this.player.onDone(() => {
      this.cdr.detectChanges();
    });
  }

  ngOnInit(): void {
    console.log('init');
  }

  ngOnDestroy(): void {
    if (this.player) {
      this.player.destroy();
    }
    console.log('destroy');
  }

  get slideInAnimation() {
    return [
      style({ opacity: 0, transform: 'translateX(100%)' }),
      animate('600ms', style({ opacity: 1, transform: 'translateX(0)' })),
    ];
  }

  get slideOutAnimation() {
    return [
      style({ opacity: 1, transform: 'translateX(0)' }),
      animate('900ms', style({ opacity: 0, transform: 'translateX(100%)' })),
    ];
  }
}

uj5u.com熱心網友回復：

我想你可以使用一個二傳手

_showDrawer:boolean
get showDrawer(){
  return this._showDrawer;
}
set showDrawer(value){
  if (!value){
    this.runSlideAnimation(value,true)
  }
  else
    this._showDrawer=value
}

而你的函式 runSlideAnimation

runSlideAnimation(showDrawer: boolean,forceDestroy:boolean=false){
    ...
    this.player.onDone(() => {
      if (forceDestroy)
          this._showDrawer=false
      this.cdr.detectChanges();
    });
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344952.html

標籤：有角的动画片

上一篇：沒有插值的情節影片

下一篇：如何使用Maven將所有依賴項放入JAR檔案中的一個檔案夾中？