从 API 动态加载文本时，字幕第一次重置

Question

我正在我的角度应用程序中处理这个选框。我通过调用 API 并在选取框中显示该文本来获取数据，但是当页面重新加载并且选取框从右向左开始时，当它到达 div 的末尾时，选取框会从右侧重置并重新启动，而不是给出无限循环。这仅在页面重新加载后第一次发生，然后就可以正常工作了。而且，只有通过 API 引入文本时才会发生这种情况，如果我在选取框标记中硬编码一些文本，它就可以正常工作

header.component.html div

<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");
    });
   
  }

共享.service.ts

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

我没有使用 CSS 动画，因为你必须在其中设置秒数。速度根据文本长度不断变化。仅使用选取框标签时不会发生这种情况。

Answer 1

您可以尝试添加相同的文本两次，这样就摆脱了这个限制。但请注意：marquee 标签已弃用，应谨慎使用，因为它将来可能会停止工作。

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="width: 100%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
    <marquee><span>{{announcement}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{announcement}}</span></marquee>
</div>
  `,
})
export class App {
  announcement = 'Lorem Ipsum is simply dummy text';
}

bootstrapApplication(App);

Stackblitz 演示