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

Question

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

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

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

现在可以测试了： - 上方的分享按钮来自 AppComponent。它们在导航时不会改变。 - 底部的分享按钮位于路由组件中，每次都演示发生了什么

首页
- 在主页上，单击底部的 Facebook 分享
- 要分享的url是：u= https%3A%2F%2F....%2Fhome
- 点击底部的 Tweet 按钮
- 要分享的url是https://..../home
- 没问题
去约翰威克
- 在 John Wick 页面中，单击底部的 Facebook 分享
- 要分享的url是：u=https%3A%2F%2F....%2Fperson%2F1 (/person/1)
- 点击底部的 Tweet 按钮
- 要分享的url是https://..../person/1
- 没问题
现在导航到另一个人（例如 Hannibal Lecter）
- 在 John Wick 页面中，单击底部的 Facebook 分享
- 要分享的url是：u=https%3A%2F%2Fmintplayer.com%2Fperson%2F2 (/person/2)
- 点击底部的 Tweet 按钮
- 要分享的url是STILLhttps://..../person/1
- 在同一导航组件中呈现的项目之间切换时，Twitter 分享 url 不会更新。

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

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

在 FacebookShareComponent 和 TwitterShareComponent 中，有一个 routerLink 输入。设置 routerLink 时，会计算命令数组。该数组中的项目也正在使用 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

我终于成功了，只需将 HTML 替换回 Twitter 文档所需的状态，并调用 widgets.load() 函数。

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>

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

Angular: Social share buttons, update URL for Twitter share button

angular

angular9