导航后不应重新运行 Angular 指令答案

【问题标题】：Angular Directive should not rerun after navigation导航后不应重新运行 Angular 指令
【发布时间】：2021-10-23 16:46:50
【问题描述】：

我有一个指令应该为 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))
  }

【问题讨论】：

这里没有足够的信息。导航后是否会重新渲染您使用的元素？

标签： angular angular-directive

【解决方案1】：

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

我添加了一个带有 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> {
  // ...
  }

}

【讨论】：