2017-10-03 14 views
0

私はangular4の個人用プロジェクトでjsウィジェット(https://youglish.com/widget.jsp)を使用しようとしていますが、angular4とjavascriptでは経験がありません。私はパラメータを変更するためにいくつかの助けをしたいと思います。アンサンブル4でjsウィジェットを使用

私はindex.htmlを

中のjs参照入れ:

<script async src="https://youglish.com/public/emb/widget.js"charset="utf-8"></script> 

</head> 
<body> 

とコンポーネントでは、私は例のように置く:

youglish.component.html

<p> 
Youglish Test 
</p> 

<button type="button" class="btn btn-sm btn-outline-success" (click)="changeText()">Load </button> 


<a id="yg-widget-0" class="youglish-widget" data-query="polyglot" data-components="248" data-toggle-ui="1" href="https://youglish.com">Visit YouGlish.com</a> 

しかし、このようにパラメータをバインドすることはできません:data-query = "{{searchWord}}"。

compiler.es5.js:1694 Uncaught Error: Template parse errors: 
Can't bind to 'query' since it isn't a known property of 'a'. (" 

<a id="yg-widget-0" class="youglish-widget" [ERROR ->]data-query="{{searchWord}}" data-components="248" data-toggle-ui="1" href="https://youglish.com">Visit"): ng:///AppModule/[email protected]:44 
    at syntaxError (compiler.es5.js:1694) 

youglish.component.ts

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'youglish', 
    templateUrl: './youglish.component.html', 
    styleUrls: ['./youglish.component.css'] 
}) 
export class YouglishComponent implements OnInit { 

    searchWord: string; 

    constructor() { } 

    ngOnInit() { 

    } 

    changeText(){ 

    this.searchWord = 'Welcome'; 
    } 

} 

誰か私はウィジェット内の単語をバインドすることができます方法を知っている

:これは私にエラーを与える

<a id="yg-widget-0" class="youglish-widget" data-query="{{searchWord}}" data-components="248" data-toggle-ui="1" href="https://youglish.com">Visit YouGlish.com</a> 

+0

残念ながら、あなたは角度についての詳細を学ぶために持ってしようとしています。あなたが欠けているものは、角度の基本です。 https://angular.io/tutorialのチュートリアルをご覧ください。 – nocarrier

答えて

0

は、ディレクティブを結合入力を使用します。

<a id="yg-widget-0" class="youglish-widget" [data-query]="searchWord" data-components="248" data-toggle-ui="1" href="https://youglish.com">Visit YouGlish.com</a> 

または文字列として項目を適用します。

<a id="yg-widget-0" class="youglish-widget" data-query="'{{searchWord}}'" data-components="248" data-toggle-ui="1" href="https://youglish.com">Visit YouGlish.com</a> 
関連する問題