TrustPilot Id 在硬重新加载时不显示

Question

我有这个角度组件，似乎使 TrustPilot 小部件在硬刷新后消失，任何人都可以解释为什么吗？

import { Component, Input, OnInit } from '@angular/core';

declare global {
  interface Window { Trustpilot: any; }
}

@Component({
  selector: 'app-trustbox-normal',
  templateUrl: './trustbox-normal.component.html',
  styleUrls: ['./trustbox-normal.component.scss']
})
export class TrustboxNormalComponent implements OnInit {

  @Input() trustPilotId;

  constructor() { }

  ngOnInit(): void {
    setTimeout(() => {
      const trustboxRef = document.getElementById('trustbox');
      window.Trustpilot.loadFromElement(trustboxRef);
    }, 200);
  }
}

<!-- TrustBox widget - Product Mini -->
<div
  id="trustbox"
  class="trustpilot-widget"
  data-locale="en-GB"
  data-template-id="54d39695764ea907c0f34825"
  data-businessunit-id="xxxxxxxxxxxxxxx"
  data-style-height="24px"
  data-style-width="100%"
  data-theme="light"
  [attr.data-sku]="trustPilotId"
  data-no-reviews="hide"
  data-scroll-to-list="true"
  data-style-alignment="center"
>
  <a
    href="xxxxxxxxxxx"
    target="_blank"
    rel="noopener"
  >
    Trustpilot
  </a>
</div>
<!-- End TrustBox widget -->

我不得不添加延迟，因为它不会立即获取 trustPilotId。

它在从不同页面路由时加载，但如果我硬重新加载页面，它就会消失。尽管上面包含了 href，但该小部件似乎也不可点击（出于隐私考虑，我已将链接替换为 xxx）

Answer 1

您可以尝试在视图初始化后执行该操作吗，我们需要使用

ngAfterViewInit

钩子！

import { Component, Input, AfterViewInit } from '@angular/core';

declare global {
  interface Window { Trustpilot: any; }
}

@Component({
  selector: 'app-trustbox-normal',
  templateUrl: './trustbox-normal.component.html',
  styleUrls: ['./trustbox-normal.component.scss']
})
export class TrustboxNormalComponent implements AfterViewInit {

  @Input() trustPilotId;

  constructor() { }

  ngAfterViewInit(): void {
    setTimeout(() => {
      const trustboxRef = document.getElementById('trustbox');
      window.Trustpilot.loadFromElement(trustboxRef);
    }, 200);
  }
}