角4リンクされたボタンが表示されない

リンクされたフォローボタンを表示するためにこれらのスクリプトをどのように使用できるかを調べようとしています。私はAngular 4を使用していますが、スクリプトを実際に使用すべきではないことを理解しています。私はリンクされた開発者サイトによって与えられたコードを実装しようとしています角4リンクされたボタンが表示されない

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script> 
<script type="IN/FollowCompany" data-id="218698" data-counter="right"></script>

しかし、表示されません。私は他の選択肢があるかどうか試してみましたが、最高のものはng-shareですが、私の理解には、followボタンがなく、共有ボタンしかありません。私は代替案を公開していますが、ボタンをリンクされた開発者サイトが提供するものと同じように見せたいと思っています。

編集：私は、Twitterウィジェットスクリプトが挿入されているインスタンスを使用しています。

import { Component, Input } from '@angular/core'; 
import { NavigationService } from '../../services/navigation.service'; 
import { ContentService } from '../../services/content.service'; 
import { Category } from '../../services/models/category'; 

import { ShareButtonsModel } from '../../services/models/body-component'; 
import { BrowserModule, DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: 'share-buttons', 
    templateUrl: './share-buttons.component.html', 
    styleUrls: ['./share-buttons.component.css'] 
}) 
export class ShareButtonsComponent { 

    @Input('share-buttons-layout') shareButtonsLayout: ShareButtonsModel; 
    @Input('share-buttons-data') shareButtonsData; 
    externalHTML: SafeHtml; 
    categories: Category[]; 

    constructor(private sanitizer: DomSanitizer, public cService: ContentService, public nService: NavigationService) { 
     let htmlStr = `<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
`; 
     this.downloadJS(htmlStr); 
     this.externalHTML = this.sanitizer.bypassSecurityTrustHtml(htmlStr); 
    } 

    ngOnInit() { 
     this.cService.getLayout().subscribe(res => this.categories = res); 
    } 


    downloadJS(string) { 
     var parser = new DOMParser(); 
     var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script'); 
     var head = document.getElementsByTagName('head')[0]; 
     //var result = []; 

     for (var i = 0; i < scripts.length; i++) { 
      var src = scripts[i].getAttribute('src'); 
      var script = document.createElement('script'); 
      if (src && src.length) { 
       script.src = (src); 
      } else { 
       script.innerHTML = scripts[i].innerHTML; 
      } 
      document.head.appendChild(script); 
      head.removeChild(script); 
     } 

    } 
}

そして、私はTwitterのボタンを追加し、HTML

はここにある：

<!--Twitter Follow--> 
    <div *ngIf="button.button==='twitterFollow'"> 
     <a href="https://twitter.com/dummyComp" class="twitter-follow-button" data-show-count="false">Follow @dummyComp</a> 
    </div>

私が、私のサイトから移動したときに完全に正常に動作するようです。

出典

2017-09-20 tony67893

これらは、あなたの 'index.html'ファイルにありますか？これはスクリプトを含める唯一の場所です。 –

いいえ、これらはindex.htmlファイルには含まれていませんが、私が行った研究から、これらのスクリプトは、ボタンを表示したい領域に配置されます。 – tony67893

悲しいことに、このようなスクリプトをコンポーネントのhtmlテンプレートに直接組み込むことはできません。頭の上からこれに固有の回避策を知りません。 –

あなたはngAfterViewInit機能にコードを追加し、動的などのスクリプトタグを追加することができます - 私はしかし、コンポーネントでそれを機能「LinkedInのフォロー」ボタンを表示することができる午前

const s = document.createElement('script'); 
    s.type = 'in/Login'; 
    var elementRef = document.getElementById("linkedinBtn"); // element or div 
    where you want to add the button 
    elementRef.appendChild(s);

出典

2017-10-18 17:20:40 Sanket

（角度5）ナビゲーションが別のコンポーネントにルーティングされ、再び戻ると、iframeが壊れている/ゴミ箱になっているように見えます。

のindex.html：

<body> 
    <!-- Scripts --> 
    <div id="linkedin-scripts" style="display:none;"> 
     <script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script> 
     <script type="IN/FollowCompany" data-id="" data-counter="right"></script> 
    </div> 
    <app-root></app-root> 
</body>

your.component.html

<div id="linkedin"></div>

your.component.ts

ngOnInit() { 
    document.getElementById("linkedin").innerHTML = document.getElementById("linkedin-scripts").innerHTML; 
    }

出典

2018-03-06 22:28:31

角4リンクされたボタンが表示されない

答えて

関連する問題