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

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

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

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

TypeScript

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

Q&A

0回答

1726閲覧

AngularのComponent内に置いたTwitterボタンからの発言内容を動的に変更したい

TomoyukiSato

総合スコア16

Twitter

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

TypeScript

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

1グッド

0クリップ

投稿2017/04/01 12:40

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

AngularでWebアプリケーションを作っていて、Component内にTwitterボタンを置きました。

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

このボタンからの発言内容を、APIから取得した値で動的に生成しようとしています。

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

発言内容を動的に生成するため、data-text={{tweetText}}のようにプロパティをバインドしているのですが、これが反映されません。デフォルトと思われるページタイトルとURLが発言内容になります。

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

html

1<!-- foo.component.html --> 2<a *ngIf="!loading" href="https://twitter.com/share" class="twitter-share-button" data-text="{{tweetText}}">Tweet</a>

typescript

1// foo.component.ts 2data: Foo; 3tweetText: string; 4loading: boolean; 5errorMessage: string; 6 7constructor( 8 private fooService: FooService, 9 private elementRef: ElementRef 10) {} 11 12getData(): void { 13 this.fooService.getData() 14 .subscribe( 15 data => { 16 this.data = data; 17 this.tweetText = data.prop; 18 19 // ref. question 70842 20 let script = document.createElement('script'); 21 let twScript = 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');"); 22 script.appendChild(twScript); 23 this.elementRef.nativeElement.appendChild(script); 24 25 this.loading = false; 26 }, 27 error => this.errorMessage = <any>error 28 ); 29 }

typescript

1// foo.service.ts 2getData(): Observable<Foo[]> { 3 return this.http.get('http://xxx.yyy.zzz/api') 4 .map(res => res.json().data) 5 .catch(error => Observable.throw(error.message)); 6}

###試したこと

  • data-textに固定の文字列を指定すると正常に反映されます(data-text="foo"と書けばOK)
  • 他の属性、例えばdata-hashtagsにプロパティをバインドするとスクリプトエラーになります

Unhandled Promise rejection: Template parse errors:
Can't bind to 'hashtags' since it isn't a known property of 'a'. ("m/share" class="twitter-share-button" [ERROR ->]data-hashtags="{{hash}}">Tweet</a>

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

  • Angular 4.0.1
  • TypeScript
  • Chrome / Firefox / Edge
real👍を押しています

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問