Javascript Angular 2上的Twitter小部件

我创建了一个Twitter小部件，并试图将其放在Angular 2项目中，但JS文件不起作用

如果我用JS（）插入它，它会工作，但当我切换到另一个选项卡并返回（我安装了角度路由）时，它会消失并显示标记中的任何内容（因此，“Tweets by…”）

HTML代码（在主组件中）：

在home.component.ts中，代码由@Arg0n提供（在答案部分查找）：

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，NavigationEnd}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
构造函数（专用_路由器：路由器）{}
公共ngOnInit（）{
此._router.events.subscribe（val=>{
if（导航结束的val实例）{
（
我的评论示例（相关部分）：

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router，NavigationEnd}；
@组件（{…}）
导出类MyComponent实现OnInit{
构造函数（专用_路由器：路由器）{}
公共ngOnInit（）{
此._router.events.subscribe（val=>{
if（导航结束的val实例）{
twttr=（函数（d，s，id）{
让js:any，fjs=d.getElementsByTagName[0]，
t=（窗口）.twttr |{}；
if（d.getElementById（id））返回t；
js=d.createElement；
js.id=id；
js.src=”https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore（js，fjs）；
t、 _e=[]；
t、 就绪=功能（f：任何）{
t、 _e.推动（f）；
};
返回t；
}（文件，“脚本”、“推特wjs”）；
}
});
}
}
好的，我找到了一个解决方案。当我们在角路由器之间切换时，小部件卸载。这就是为什么我们放置订阅者，所以我们每次在选项卡之间切换时都会加载小部件。我们可以看到如何加载小部件以便延迟加载内容。当页面准备就绪时，我们可以使用该功能加载小部件。不要忘记取消订阅在视图被破坏后进行ribe

代码：

从'@angular/core'导入{Component，OnDestroy}；
从'@angular/Router'导入{Router，NavigationEnd}；
@组件（{…}）
导出类HomeComponent实现OnDestroy{
私人推特：任何；
构造函数（专用路由器：路由器）{
this.initTwitterWidget（）；
}
initTwitterWidget（）{
this.twitter=this.\u router.events.subscribe（val=>{
if（导航结束的val实例）{
twttr=（函数（d，s，id）{
让js:any，fjs=d.getElementsByTagName[0]，
t=（窗口）.twttr |{}；
if（d.getElementById（id））返回t；
js=d.createElement；
js.id=id；
js.src=”https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore（js，fjs）；
t、 _e=[]；
t、 就绪=功能（f：任何）{
t、 _e.推动（f）；
};
返回t；
}（文件，“脚本”、“推特wjs”）；
if（（window.twttr.ready（））
（window.twttr.widgets.load（）；
}
});
}
恩贡德斯特罗（）{
this.twitter.unsubscribe（）；
}
}
这将适用于angular 7.2.2和ionic 4.1。angular可以构建和ionic可以构建应用程序，并在cordova上进行测试

解决方案来自：

import{Component，OnInit，OnDestroy，AfterViewInit，PLATFORM_ID，Inject}来自“@angular/core”；
从“@angular/common”导入{isPlatformBrowser}；
构造函数（@Inject（PLATFORM_ID）private platformId:Object）{}
ngAfterViewInit（）{
if（isPlatformBrowser（this.platformId））{
setTimeout（函数（）{
twttr=（函数（d，s，id）{
让js，fjs=d.getElementsByTagName（s）[0]，t=（window）.twttr |{}；
if（d.getElementById（id））返回t；
js=d.createElement；
js.id=id；
js.src=https://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore（js，fjs）；
t、 _e=[]；
t、 就绪=功能（f）{
t、 _e.推动（f）；
};
返回t；
}（文档“脚本”、“twitter wjs”）；
（window.twttr.widgets.load（）；
}, 100);
}
}

将此处放在.ts中，并将twitter标记放在模板文件中
您应该提供更多信息，如果我们不知道代码，我们应该如何知道如何解决您的问题？完成，您还需要什么吗？当您在angular中切换视图时，twitter插入的脚本可能不会运行。尝试使用路由器事件再次启动它。它不会运行工作，当我在页面之间切换时，它不会显示推文。好吧，老实说，这只是一个“可能”的答案。无法测试此问题。您在控制台中是否有任何错误？您可以调试并设置断点以查看发生了什么事吗？嗯，我收到了以下错误：…w%22%2C%22page%22%3A%22timeline%22%2C%22action%22%3A%22impression%22%7D%7D未能加载资源：服务er的响应状态为400（），但我不确定这是否是因为您的代码。我现在要调试。好的，当我切换选项卡时脚本不会运行。您永远不会进入
这个。\u router.events.subscribe（val=>{…}）
功能？我发现删除Router\NavigationEnd事件侦听器，而只是使用ngAfterViewInit对我来说效果更好，因为在相同路径重新加载浏览器时不会触发NavigationEnd事件。不过，感谢您提供的解决方案，帮助我加载！
<md-card-content>
  <a class="twitter-timeline" data-lang="en" data-height="350" data-theme="light" data-chrome="noborders nofooter noheader noscrollbar transparent" href="https://twitter.com/profile">Tweets by profile</a>
</md-card-content>

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private _router : Router) { }

  public ngOnInit() {
    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"));
        twttr.widgets.load();
      }
    })
  }

}

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({ ... })
export class MyComponent implements OnInit {
  constructor(private _router: Router) {}

  public ngOnInit() {
    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"));
      }
    });
  }
}

import { Component, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({ ... })

export class HomeComponent implements OnDestroy {
  private twitter: any;

  constructor(private _router: Router) {
    this.initTwitterWidget();
  }

  initTwitterWidget() {
    this.twitter = 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.twitter.unsubscribe();
  }
}