时间戳

首页 > 解决方案 > 导航后不应重新运行 Angular 指令

angular - 导航后不应重新运行 Angular 指令

问题描述

我有一个指令应该为 div 内容设置动画。动画效果很好，但每次导航后都会重播。有没有办法让它只在初始页面加载时运行？

**编辑

我正在制作动画的元素在导航时重新渲染。

@Directive({
  selector: '[appAnimateText]'
})
export class AnimateTextDirective implements AfterViewInit, OnInit {

  @HostBinding('style.white-space') whiteSpace = 'pre';
  private animateTo: string | undefined;

  constructor(private el: ElementRef) {
  }

  get innerText(): string {
    return this.el.nativeElement.innerText;
  }

  set innerText(newText: string) {
    this.el.nativeElement.innerText = newText;
  }

  ngOnInit(): void {
    this.animateTo = this.innerText;
    // placeholder nbsp string which is than transformed back to the text
    this.innerText = this.innerText.split('').map(() => ' ').join('');
  }

  ngAfterViewInit(): void {
    if (this.animateTo) {
      this.animate(this.animateTo.split(''));
    }
  }

  animate(animateTo: string[]): Promise<void> {
     // animation placeholder
     return new Promise((res) => setTimeout(res, 2000))
  }

标签： angularangular-directive

解决方案

我能够通过在我的服务中包含动画状态来解决这个问题。

我添加了一个带有 ngContentId 的地图和一个布尔天气，它完成与否。


// Service
export class AppService {
  // ...
  public appAnimationState = new Map<string, boolean>();

  public getAnimationState(elementId: string): boolean | undefined {
    return this.appAnimationState.get(elementId);
  }

  public setAnimationState(elementId: string, state: boolean): void {
    this.appAnimationState.set(elementId, state);
  }

  // ...
}

// Directive
export class AnimateTextDirective implements OnInit {

  @HostBinding('style.white-space') whiteSpace = 'pre';
  private animateTo: string | undefined;
  private ngContentId: string | undefined;

  constructor(private el: ElementRef, private appService: AppService) {
  }

  get innerText(): string {
    return this.el.nativeElement.innerText;
  }

  set innerText(newText: string) {
    this.el.nativeElement.innerText = newText;
  }

  ngOnInit(): void {
    this.ngContentId = this.el.nativeElement.attributes[0].name;

    // I use the ngContentId assigned by angular, which does not change on
    // navigation, that the animation only runs once
    if (this.ngContentId && !this.appService.getAnimationState(this.ngContentId)) {
      this.animateTo = this.innerText;
      this.innerText = this.innerText.split('').map(() => ' ').join('');
      this.animate(this.animateTo.split(''));
      this.appService.setAnimationState(this.ngContentId, true);
    }
  }

  animate(animateTo: string[]): Promise<void> {
  // ...
  }

}

推荐阅读