Angular: кнопки социальных сетей, кнопка обновления URL для кнопки Twitter. - PullRequest
Новая
       24

Angular: кнопки социальных сетей, кнопка обновления URL для кнопки Twitter.

0 голосов
/ 03 мая 2020

Я создал angular приложение с компонентами маршрутизации. Я пытался добавить кнопки обмена Facebook и Twitter. При переходе к другим компонентам через ссылки на маршрутизаторы кнопки общего доступа Facebook и Twitter корректно обновляют свои URL-адреса. Но при переходе к тому же компоненту, который уже активен с другими параметрами маршрута, кнопка общего доступа Facebook корректно обновляет URL, а кнопка общего доступа Twitter - нет.

Я создал репродукцию: https://github.com/MintPlayer/SocialShareButtonsAngular

Теперь вы можете проверить это: - Верхние кнопки общего доступа из AppComponent. Они не изменятся при навигации. - Нижние кнопки общего доступа расположены в компонентах маршрутизации, каждый раз снова, чтобы продемонстрировать, что происходит

  • Home
    • На главной странице щелкните нижний общий ресурс Facebook
    • URL для общего доступа: u = https% 3A% 2F% 2F ....% 2Fhome
    • Нажмите нижнюю кнопку Tweet
    • URL для общего доступа https://..../home
    • Все отлично
  • Go для Джона Вика
    • На странице John Wick нажмите нижняя доля Facebook
    • URL, которым нужно поделиться: u = https% 3A% 2F% 2F ....% 2Fperson% 2F1 ( / person / 1 )
    • Нажмите нижнюю кнопку Tweet
    • URL, которым вы хотите поделиться: https://..../person/1
    • Все отлично
  • Теперь перейдите к другой человек (например, Ганнибал Лектер)
    • На странице Джона Вика щелкните нижнюю долю Facebook
    • URL-адрес, которым вы хотите поделиться: u = https% 3A% 2F% 2Fmintplayer.com% 2Fperson% 2F2 ( / person / 2 )
    • Нажмите нижняя кнопка Tweet
    • URL-адрес для совместного использования: STILL https://..../person/1
    • При переключении между элементами, отображаемыми в одном компоненте навигации, в Twitter URL-адрес общего доступа не обновляется.

Все репродукции можно найти в этом репозитории: https://github.com/MintPlayer/SocialShareButtonsAngular

Здесь необходимо информация уже выводится на консоль.

Console output

Внутри FacebookShareComponent и TwitterShareComponent есть вход routerLink. Когда устанавливается routerLink, массив команд вычисляется. Элементы внутри этого массива также отслеживаются с помощью IterableDiffers. 

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

Как я могу обновить URL-адрес общего ресурса для существующей кнопки Twitter? В настоящее время я использую angular 9.

1 Ответ

0 голосов
/ 05 мая 2020

Я, наконец, преуспел, просто заменив 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>
...