2017-08-21 19 views
1

新しい角度を付けてください。私は、特定のタイムラインからツイートにロードする必要があります。これを達成する最良の方法は何ですか?私はこのパッケージ(https://www.npmjs.com/package/ng4-twitter-timeline)を使って試しましたが、そのドキュメントの指示に従っていますが、 "ng4-twitter-timelineは既知の要素ではありません"というエラーが表示されます。TwitterのタイムラインをAngular4アプリに埋め込む方法

私もindex.htmlをする

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

に追加しようとしました...

は、これが機能するためにロードする必要があり、追加のスクリプトはありますか?

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> 
+1

このパッケージの説明は非常に明確です。コードがなければ、何が間違っているのかわかりません。 –

+1

あなたはすべてhome.componentでやっていますか?あなたはあなたのapp.moduleで宣言しましたか?

1

ではありません。したがって、あなたの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 { } 
関連する問題