Angular中API动态加载文本时Marquee首次滚动重置问题

问题现象 #

在Angular应用中使用<marquee>标签展示API获取的滚动文本，存在以下异常：

• 页面首次重载后，文本滚动到容器末端会重置并从右侧重新开始，无法实现无限循环
• 仅首次重载时出现该问题，后续页面操作后恢复正常
• 硬编码文本时无此问题，仅通过API异步加载文本时触发

相关代码 #

header.component.html #

<div style="width: 50%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
    <marquee>{{announcement}}</marquee>
</div>

header.component.ts #

ngOnInit() {
    const apiurl = environment.applicationRestApiId + "/fetchHeaderAnnouncement";
    this.shared.fetchHeaderAnnouncement(apiurl).subscribe(data => {
      this.announcement = data;
    },error => {
      console.log("Error while fetching Announcement");
    });
   
  }

shared.service.ts #

fetchHeaderAnnouncement(url: string) :Observable<string> {
    return this.http.get(url,
      {responseType: 'text'}
    );
  }

问题原因 #

<marquee>标签的滚动逻辑是在元素初始化阶段，基于当时的内容尺寸计算滚动范围和循环规则。页面首次加载时，announcement初始为空字符串，<marquee>先以空内容完成初始化；当API数据返回后，文本内容更新，但marquee已初始化的滚动参数并未同步更新，导致第一次滚动到末端后出现异常重置。

解决方案 #

方法一：延迟渲染marquee（推荐） #

通过*ngIf指令，等待API数据加载完成后再渲染<marquee>标签，确保它基于完整的文本内容初始化滚动逻辑：

<div style="width: 50%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
    <marquee *ngIf="announcement">{{announcement}}</marquee>
</div>

方法二：手动重置marquee元素 #

如果需要保持marquee容器始终显示，可通过ViewChild获取marquee元素，在数据加载完成后手动重置滚动状态：

1. 修改header.component.ts：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
// 其他导入保持不变

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  announcement: string = '';
  @ViewChild('marqueeEl') marqueeEl!: ElementRef<HTMLMarqueeElement>;

  constructor(private shared: SharedService) { }

  ngOnInit() {
    const apiurl = environment.applicationRestApiId + "/fetchHeaderAnnouncement";
    this.shared.fetchHeaderAnnouncement(apiurl).subscribe(data => {
      this.announcement = data;
      // 数据加载完成后重置marquee
      if (this.marqueeEl.nativeElement) {
        this.marqueeEl.nativeElement.stop();
        setTimeout(() => {
          this.marqueeEl.nativeElement.start();
        }, 0);
      }
    },error => {
      console.log("Error while fetching Announcement");
    });
  }
}

2. 修改header.component.html，添加模板引用：

<div style="width: 50%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
    <marquee #marqueeEl>{{announcement}}</marquee>
</div>

方法三：强制触发变更检测 #

通过ChangeDetectorRef手动触发Angular变更检测，确保marquee元素感知到内容更新：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
// 其他导入保持不变

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  announcement: string = '';

  constructor(private shared: SharedService, private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    const apiurl = environment.applicationRestApiId + "/fetchHeaderAnnouncement";
    this.shared.fetchHeaderAnnouncement(apiurl).subscribe(data => {
      this.announcement = data;
      this.cdr.detectChanges();
    },error => {
      console.log("Error while fetching Announcement");
    });
  }
}

内容的提问来源于stack exchange，提问作者Hardik Singhal