2017-10-03 2 views
0

J'essaie d'utiliser un widget js (https://youglish.com/widget.jsp) dans mon projet personnel angular4, mais je n'ai pas d'expérience en angular4 et javascript non plus. Je voudrais de l'aide pour changer le paramètre.Utilisation d'un widget js en angulaire 4

je mets la référence js dans index.html

:

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

</head> 
<body> 

Et dans le composant, je mets comme dans l'exemple:

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> 

Mais je ne suis pas capable de lier le paramètre comme ceci: data-query = "{{searchWord}}".

<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> 

Cela me donne une erreur:

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'; 
    } 

} 

Quelqu'un sais comment je peux lier le mot dans un widget?

+0

Malheureusement, vous allez devoir apprendre plus sur angulaire. Ce qui vous manque, ce sont les fondamentaux de l'angulaire. Veuillez suivre le tutoriel sur https://angular.io/tutorial. – nocarrier

Répondre

0

Utilisez une directive contraignante d'entrée:

<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> 

Ou appliquer l'élément sous forme de chaîne:

<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>