###前提・実現したいこと
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
あなたの回答
tips
プレビュー