如何将 twitter 时间线嵌入到 Angular4 应用程序中答案

【问题标题】：How to embed twitter timeline to Angular4 app如何将 twitter 时间线嵌入到 Angular4 应用程序中
【发布时间】：2018-01-29 15:18:29
【问题描述】：

Angular 新手，请多多包涵。我需要从特定时间线加载推文。实现这一目标的最佳方法是什么？我已经尝试使用这个包 (https://www.npmjs.com/package/ng4-twitter-timeline)，并按照该文档中的说明进行操作，但我仍然收到“ng4-twitter-timeline is not a known element”的错误消息。

我也试过添加

<script src="https://platform.twitter.com/widgets.js" async></script>

到 index.html...

是否需要加载其他脚本才能使其正常工作？

app.module.ts

...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     HttpModule,
     AngularFontAwesomeModule,
     SwiperModule,
     RouterModule.forRoot(routes),
     ShareModule,
     MasonryModule,
     Ng4TwitterTimelineModule
  ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

tweets.component.ts

   import { Component, OnInit } from '@angular/core';
   import { Ng4TwitterTimelineService } from 'ng4-twitter-timeline/lib/index';

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

 constructor(private ng4TwitterTimelineService: Ng4TwitterTimelineService) {}

   ngOnInit() {}
}

tweets.component.html

   <ng4-twitter-timeline [dataSrc]="{sourceType: 'profile',screenName: 'lokers_one'}" [opts]="{tweetLimit: 2}"></ng4-twitter-timeline>

【问题讨论】：

嗯，包描述很清楚。没有您的代码，我们无法判断它有什么问题。
您所做的一切都是在 home.component 中进行的吗？您是否在 app.module 中声明了它？通过
用我的代码更新了问题。
除了app.mod还有其他模块吗？
同时删除你的

标签： javascript angular twitter

【解决方案1】：

大家都明白了。演示中使用的帐户具有受保护的推文...这就是为什么没有嵌入任何内容...我更改了帐户并且它确实有效。但仍然不明白为什么我仍然收到此错误：'ng4-twitter-timeline' is not a known element'

【讨论】：

【解决方案2】：

当你在 @ngModule 中导入 Ng4TwitterTimelineModule 时，你应该添加 .forRoot。所以你的 app.module.ts 应该是这样的：

...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     HttpModule,
     AngularFontAwesomeModule,
     SwiperModule,
     RouterModule.forRoot(routes),
     ShareModule,
     MasonryModule,
     Ng4TwitterTimelineModule.forRoot()
  ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

【讨论】：