Angular：社交分享按钮，更新 URL 为 Twitter 分享按钮

Question

我用路由组件构建了一个 angular 应用程序。 我尝试添加 Facebook 和 Twitter 共享按钮。 通过 routerlinks 导航到其他组件时，Facebook 和 Twitter 共享按钮会正确更新其 URL。 但是，当导航到已使用其他路由参数激活的同一组件时，Facebook 共享按钮会正确更新 URL，但 Twitter 共享按钮不会。

我已经建立了一个复制品： https://github.com/MintPlayer/SocialShareButtonsAngular

• git 克隆https://github.com/MintPlayer/SocialShareButtonsAngular
• cd SocialShareButtonsAngular
• npm安装
• ng服务--打开

现在您可以对其进行测试： - 上方的分享按钮来自 AppComponent。 导航时它们不会改变。 - 底部的分享按钮位于路由组件中，每次都再次演示正在发生的事情

• 家
  • 在首页点击底部Facebook分享
  • 要共享的url是： u= https%3A%2F%2F....%2Fhome
  • 点击底部的推文按钮
  • 要共享的 url 是https://..../home
  • 一切都好
• Go 至约翰威克
  • 在 John Wick 页面，点击底部 Facebook 分享
  • 要共享的 url 为：u=https%3A%2F%2F....%2Fperson%2F1 ( /person/1 )
  • 点击底部的推文按钮
  • 要共享的 url 是https://..../person/1
  • 一切都好
• 现在导航到另一个人（例如汉尼拔莱克特）
  • 在 John Wick 页面，点击底部 Facebook 分享
  • 待分享的url为：u=https%3A%2F%2Fmintplayer.com%2Fperson%2F2 ( /person/2 )
  • 点击底部的推文按钮
  • 要共享的 url仍然是https://..../person/1
  • 在同一导航组件中呈现的项目之间切换时，共享 url 的 Twitter 不会更新。

整个复制品可以在这个存储库中找到： https://github.com/MintPlayer/SocialShareButtonsAngular

已经有基本信息打印到控制台。

在 FacebookShareComponent 和 TwitterShareComponent 内部，有一个 routerLink 输入。 设置 routerLink 时，正在计算 commands 数组。 该数组中的项目也正在使用 IterableDiffers 进行监视。

  ngAfterViewChecked() {
    const change = this.differ.diff(this.commands);
    if (change !== null) {
      // console.log(change);
      this.updateHref();
      this.reloadTwitterWidgets();
    }
  }

如何更新现有 Twitter 按钮的共享 url？ 目前我正在使用 angular 9。

Answer 1

I finally succeeded by just replacing the HTML back to the state required by the Twitter docs, and calling the widgets.load() function.

export class TwitterShareComponent implements AfterViewChecked {

  constructor(private router: Router, private locationStrategy: LocationStrategy, differs: IterableDiffers, @Inject('BASE_URL') private baseUrl: string) {
    this.differ = differs.find(this.commands).create(null);
  }

  @ViewChild('wrapper') wrapper: ElementRef<HTMLDivElement>;
  differ: IterableDiffer<any>;

  ngAfterViewChecked() {
    const change = this.differ.diff(this.commands);
    if (change !== null) {
      this.updateHref();
      this.reloadTwitterWidgets();
    }
  }

  //#region url
  href: string;
  private commands: any[] = [];
  @Input() set routerLink(value: string | any[]) {
    if (value === null) {
      this.commands = [];
    } else if (Array.isArray(value)) {
      this.commands = value;
    } else {
      this.commands = [value];
    }
    this.updateHref();
    this.reloadTwitterWidgets();
  }
  //#endregion


  private updateHref() {
    let urlTree = this.router.createUrlTree(this.commands);
    let urlSerialized = this.router.serializeUrl(urlTree);
    this.href = this.baseUrl + this.locationStrategy.prepareExternalUrl(urlSerialized);
    console.log(`Twitter share href: ${this.href}`);
  }

  private reloadTwitterWidgets() {
    if (typeof window !== 'undefined') {
      setTimeout(() => {
        this.wrapper.nativeElement.innerHTML = `<a href="https://twitter.com/share" class="twitter-share-button" data-url="${this.href}" data-size="${this.size}" data-text="${this.text}" data-count="none">Tweet</a>`;
        window['twttr'] && window['twttr'].widgets.load();
      }, 10);
    }
  }

  @Input() text: string = '';
  @Input() size: 'large' | 'small' = 'large';
}

和 HTML

<div class="wrapper" #wrapper></div>