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>

在角度4中使用js小部件

1 个答案: