質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

2986閲覧

AngularのComponent内にTwitterボタンを置きたい

TomoyukiSato

総合スコア16

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2017/03/30 15:55

###前提・実現したいこと

Angularで作っているWebアプリケーションにTwitterボタンを配置しようとしています。
ボタンは以下で生成したコードをそのまま使っています。

https://about.twitter.com/ja/resources/buttons#tweet

###発生している問題・エラーメッセージ

ボタンではなく"Tweet"というリンクで表示されます。クリックすれば正しく動作はします。

###該当のソースコード

Quickstart Seedをcloneしてapp.component.tsのtemplateにTwitterボタンのコードをそのまま貼り付けています。

https://github.com/angular/quickstart

ts

1import { Component } from '@angular/core'; 2 3@Component({ 4 selector: 'my-app', 5 template: `<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'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');</script>`, 6}) 7export class AppComponent { name = 'Angular'; }

###試したこと

  • Component内ではなくindex.htmlにコードを貼ると正常にボタンの形で表示されます。
  • ボタンのコードの<script>タグをindex.htmlの<head><body>に移動しても表示はボタンではなくリンクになります

###補足情報(言語/FW/ツール等のバージョンなど)

  • TypeScript
  • Angular 4.0.1
  • Chrome / Firefox / Edge

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

他にスマートな書き方がありそうですが

ngAfterViewInitはビューの書き込みが終わった後に実行する
ElementRefはDomをいじって直接scriptタグを書き込むために使用

twitterrr

typescript

1import { Component, AfterViewInit, ElementRef } from '@angular/core'; 2 3@Component({ 4 selector: 'my-app', 5 template: `<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>`, 6 7}) 8export class AppComponent implements AfterViewInit { 9 constructor(private elementRef: ElementRef) { }; 10 11 name = 'Angular'; 12 ngAfterViewInit(): void { 13 var s = document.createElement("script"); 14 var st = document.createTextNode("!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'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');"); 15 s.appendChild(st); 16 this.elementRef.nativeElement.appendChild(s); 17 } 18}

参考
http://stackoverflow.com/questions/34140065/script-tag-in-angular2-template-hook-when-template-dom-is-loaded
http://blog.yuhiisk.com/archive/2016/05/01/angular2-dom-manupilation.html

投稿2017/03/31 00:59

編集2017/03/31 01:05
mosapride

総合スコア1480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TomoyukiSato

2017/04/01 11:54

回答ありがとうございました。`ngAfterViewInit`でスクリプトを流し込むことでボタンを表示することができました。実際のアプリケーションではもう少し複雑なことをやろうとしていて、Twitterボタン関連で詰まっている箇所があるのですが、内容的に別質問にして本件は解決にします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問