Angular 2+ 应用程序上的嵌入式 Twitter 小部件仅在第一页加载时显示 [英] embedded Twitter widget on Angular 2+ app only shows up on the first page load

问题描述

如果我从 Twitter 文档(https://dev.twitter.com/web/javascript/loading) 到 ngAfterViewInit 函数中，但是当我切换路线时，小部件也消失了.

My app works perfectly if I copy exactly the built-in function from Twitter docs (https://dev.twitter.com/web/javascript/loading) into ngAfterViewInit function, but when I switch the route, the widget disappears also.

以下是仅适用于第一页加载的代码:

Here is the code to work only for the first page load:

import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, ParamMap, Params } from '@angular/router';
import { Observable, Subscription } from 'rxjs/Rx';

export class ProjectDetailComponent implements OnInit, OnDestroy, AfterViewInit {

constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

ngOnInit(){}

ngAfterViewInit(){
  (<any>window).twttr = (function(d, s, id) {
      let js, fjs = d.getElementsByTagName(s)[0],
        t = (<any>window).twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = 'https://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };

      return t;
    }(document, 'script', 'twitter-wjs'));
}

}

然后我从中找到了一个公认的解决方案(Angular 2 上的 Twitter 小部件)，但该小部件在第一次加载时甚至没有显示，也没有错误，所以我什至不知道我错在哪里.

Then I found an accepted solution from this (Twitter widget on Angular 2), but the widget is not even shown from the first load and no errors so I don't even know where I was wrong.

以下是从不出现任何错误的 Twitter 小部件的代码:

Here is the code that never shows up Twitter widget without any error:

import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, ParamMap, Params } from '@angular/router';
import { Observable, Subscription } from 'rxjs/Rx';

export class ProjectDetailComponent implements OnInit, OnDestroy, AfterViewInit {

private subscription: Subscription;
constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

ngOnInit(){}

ngAfterViewInit(){
  this.subscription = this.router.events.subscribe(val => {
  if (val instanceof NavigationEnd) {
    (<any>window).twttr = (function (d, s, id) {
      let js: any, fjs = d.getElementsByTagName(s)[0],
          t = (<any>window).twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = 'https://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function (f: any) {
          t._e.push(f);
      };

      return t;
    }(document, 'script', 'twitter-wjs'));

    if ((<any>window).twttr.ready())
      (<any>window).twttr.widgets.load();
  }
});
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}    
}

基本上，我订阅小部件数据直到 NavigationEnd 然后在 ngOnDestroy 取消订阅它，所以我仍然可以保留路由切换之间的数据.我相信逻辑是正确的，因为该解决方案也适用于某人，但对我而言，直到这一刻它才起作用.

Basically, I subscribe the widget data until NavigationEnd then unsubscribe it in ngOnDestroy, so I can still remain the data between route switch. I believe the logic is correct as the solution worked for someone also, but to me it never worked until this moment.

推荐答案

试试这个，无需订阅或超时.

Try this, no need to subscribe or timeout.

ngOnInit() {
   (<any>window).twttr.widgets.load();
}

这篇关于Angular 2+ 应用程序上的嵌入式 Twitter 小部件仅在第一页加载时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！