在angular 4中使用js小部件

Question

我正在我的angular4個人項目中嘗試使用js小部件（ https://youglish.com/widget.jsp ），但我都沒有關於angular4和javascript的經驗。 我需要一些幫助來更改參數。

我將js參考放在index.html中

：

    <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}}”。

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

這給我一個錯誤：

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/YouglishComponent.html@7: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';
  }

}

有人知道我如何在小部件中綁定單詞？

Answer 1

使用輸入綁定指令：

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

在angular 4中使用js小部件

問題描述

1 個解決方案

解決方案1
0 2017-10-03 00:13:00

在angular 4中使用js小部件

問題描述

1 個解決方案

解決方案1 0 2017-10-03 00:13:00

解決方案1
0 2017-10-03 00:13:00