Twitter được nhúng cho Angular 2

Tôi đã cố gắng nhúng dòng thời gian Twitter vào ứng dụng Angular 2 của mình. Tôi đi theo hướng dẫn này https://publish.twitter.com sau đó tôi có nàyTwitter được nhúng cho Angular 2

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

tôi đặt một thẻ vào mẫu và đặt thẻ script vào index.html. Đây là một ví dụ.

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular 2 App | ng2-webpack</title> 
 
    <link rel="icon" type="image/x-icon" href="/img/favicon.ico"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
    <base href="/"> 
 
    </head> 
 
    <body> 
 
    <my-app> 
 
     <div class="loading-container"> 
 
     <div class="loading"></div> 
 
     <div id="loading-text">loading</div> 
 
     <a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> 
 
     </div> 
 
    </my-app> 
 
    </body> 
 
</html>

Nhưng nó chỉ cho thấy một thẻ, không có thời gian. Xin hãy giúp tôi!

Nguồn

2016-09-12 Huy Ham Hố

Trên thực tế nó đã xuất hiện đôi khi. Tôi tải lại trang máy chủ lần và nó sẽ hiển thị nhưng không phải lúc nào. –

Bạn nên chạy tập lệnh tiện ích con twitter sau khi mẫu của bạn được tải.

Tôi đã làm điều này:

export class SectionSocialComponent implements AfterViewInit { 
    constructor() {} 

    ngAfterViewInit() { 
      !function(d,s,id){ 
       var js: any, 
        fjs=d.getElementsByTagName(s)[0], 
        p='https'; 
       if(!d.getElementById(id)){ 
        js=d.createElement(s); 
        js.id=id; 
        js.src=p+"://platform.twitter.com/widgets.js"; 
        fjs.parentNode.insertBefore(js,fjs); 
       } 
      } 
      (document,"script","twitter-wjs"); 
    } 
}

Và tệp .html tôi chỉ chứa này:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a>

Có lẽ đây không phải là giải pháp thanh lịch nhất, nhưng làm việc cho tôi.

Nguồn

2016-11-13 09:43:32

Hey giải pháp này hoạt động nhưng bạn có thể vui lòng giải thích những gì các chức năng bên trong ngAfterViewInit đang làm. –

@AsifKarimBherani Về cơ bản, nó chèn tập lệnh tiện ích twitter không đồng bộ vào tài liệu của bạn. Bạn có thể đọc thêm về nó ở đây: https://dev.twitter.com/web/javascript/loading Tôi hy vọng nó sẽ giúp bạn hiểu, cách thức hoạt động này :) –

Nếu bạn truy cập trang web this, bạn có thể nhập URL twitter của mình và nó sẽ tạo mã cho bạn.

Nó sẽ cung cấp cho bạn hai dòng mã. Dòng thứ hai của mã là một liên kết kịch bản đến một tệp javascript mà twitter đang lưu trữ. Nó có nghĩa là chúng ta không cần phải thực hiện nó trong thế giới góc: D

đây là một ví dụ:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

dải Như góc script thẻ ngoài tầm nhìn của nó, bạn sẽ cần phải tìm một cách giải quyết. Một giải pháp khác là câu trả lời này here.

làm ví dụ:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> 
<script-hack async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script-hack>

Nguồn

2017-12-02 18:34:16 chris31389

Twitter được nhúng cho Angular 2

Trả lời

Các vấn đề liên quan