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屋！