在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