[英]How to embed twitter timeline to Angular4 app
Angular新手,多多包涵。 我需要加载来自特定时间线的推文。 完成此任务的最佳方法是什么? 我试过使用这个 package ( https://www.npmjs.com/package/ng4-twitter-timeline ),并按照该文档中的说明进行操作,但我仍然收到“ng4-twitter-timeline is不是已知元素。”
我也试过加入
<script src="https://platform.twitter.com/widgets.js" async></script>
索引.html ...
是否需要加载其他脚本才能使其工作?
应用程序模块.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>
当你在@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 { }
大家想通了演示中使用的帐户已保护推文...这就是为什么没有嵌入任何内容...我更改了帐户并且它确实有效。 但仍然不明白为什么我仍然收到此错误:'ng4-twitter-timeline' 不是已知元素'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.