如何在Angular 6应用中嵌入Twitter时间线？

针对你遇到的第三方包版本兼容、安全漏洞问题，我推荐两个靠谱的解决思路，优先推荐第一种无依赖的手动实现方式：

方案一：手动动态加载Twitter Widget脚本（最稳妥） #

这种方式不需要依赖任何第三方Angular包，完全通过Angular的组件生命周期控制脚本加载，从根源避免版本冲突和安全漏洞问题。

具体步骤： #

1. 创建一个专门的Twitter时间线组件，比如twitter-timeline.component.ts
2. 在组件中通过Renderer2动态加载Twitter的widgets脚本，确保DOM渲染完成后再初始化时间线

组件代码示例：

import { Component, OnInit, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-twitter-timeline',
  template: `<div class="twitter-timeline-container" id="twitter-timeline"></div>`,
  styles: [`
    .twitter-timeline-container {
      max-width: 600px;
      margin: 0 auto;
    }
  `]
})
export class TwitterTimelineComponent implements OnInit, AfterViewInit {

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) { }

  ngOnInit(): void { }

  ngAfterViewInit(): void {
    // 检查Twitter脚本是否已全局加载，避免重复加载
    if (!window['twttr']) {
      const twitterScript = this.renderer.createElement('script');
      twitterScript.src = 'https://platform.twitter.com/widgets.js';
      twitterScript.async = true;
      // 脚本加载完成后初始化时间线
      twitterScript.onload = () => this.initTwitterTimeline();
      this.renderer.appendChild(document.body, twitterScript);
    } else {
      // 脚本已存在，直接初始化
      this.initTwitterTimeline();
    }
  }

  private initTwitterTimeline(): void {
    const timelineContainer = this.el.nativeElement.querySelector('#twitter-timeline');
    // 调用Twitter官方API创建时间线，可根据需求切换配置
    window['twttr'].widgets.createTimeline(
      {
        // 时间线类型：这里以用户主页为例，也支持collection/list等类型
        sourceType: 'profile',
        screenName: 'Twitter' // 替换成你的目标Twitter账号
      },
      timelineContainer,
      {
        // 自定义样式配置
        height: 500,
        theme: 'light',
        borderColor: '#e1e8ed'
      }
    );
  }

  // 可选：组件销毁时清理Twitter实例，避免内存泄漏
  ngOnDestroy(): void {
    const timelineContainer = this.el.nativeElement.querySelector('#twitter-timeline');
    if (window['twttr'] && timelineContainer) {
      window['twttr'].widgets.destroy(timelineContainer);
    }
  }
}

3. 在需要展示时间线的模块中导入这个组件，然后在模板中直接使用<app-twitter-timeline></app-twitter-timeline>即可。

这种方式的核心优势：

• 完全依赖Twitter官方API，无第三方包带来的安全风险
• 精准控制脚本加载时机，避免Angular初始化时脚本未加载导致的渲染失败
• 可以灵活自定义时间线的配置和样式，适配项目需求

方案二：使用兼容Angular 6的第三方包 #

如果你更倾向于用现成的包，可以尝试锁定ngx-twitter-timeline的兼容版本。针对Angular 6和RxJS 6的环境，你可以安装3.x版本的包：

npm install ngx-twitter-timeline@3.0.0 --save

安装完成后按照包的官方文档配置模块和组件即可，但需要注意：

• 这个版本可能不再维护，需要自行评估安全风险
• 若安装后出现依赖警告，可能需要调整其他依赖的版本（比如添加RxJS的兼容补丁）

额外注意事项 #

• 确保你的Angular项目可以正常访问Twitter的CDN地址（https://platform.twitter.com），如果有代理或防火墙限制需要配置白名单
• Twitter时间线的样式可以通过自定义CSS覆盖，但注意不要破坏官方widget的核心布局

内容的提问来源于stack exchange，提问作者Fel