javascript - Angular：组件中的外部Javascript只工作一次(Angular: External Javascript in Components works only one time)

Question

I have some problems to include 3rd party widgets with a javascript part into my Angular app.

(我在将带有javascript部件的第三方小部件包含到Angular应用中时遇到一些问题。)

I read and tried solutions like

(我阅读并尝试了类似的解决方案)

Dynamically load external javascript file from Angular component

(从Angular组件动态加载外部javascript文件)

and these work, but only one time .

(这些工作， 但只有一次 。)

If I have a route change and I go back or they are displayed on another page of the webseite they stop working.

(如果我更改了路线并返回，或者它们显示在网站的另一页上，则它们将停止工作。)

I like to include these 3rd party widgets as Angular components on various places into the sidebar of my Angular app.

(我喜欢将这些第三方窗口小部件作为Angular组件包含在我的Angular应用的侧边栏中。)

A 3rd party widget eg looks like that (this is the code from the 3rd party):

(第三方小部件例如看起来像这样（这是来自第三方的代码）：)

<div id="form-192796-wrapper">
<form id="ktv2-form-192796" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html" >
<input type="hidden" id="FormField_ApiKey" name="apikey" value="xxx" />
<input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element"><label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br />
<input type="text" id="FormField_EmailAddress" name="email" value="" size="40"/></div><br />
<div><input type="submit" id="FormSubmit" name="FormSubmit" value=">Your Text"/></div>
</form>
</div>
<script type='text/javascript' src='https://klicktipp.s3.amazonaws.com/listbuildings/system/forms/scripts/protect.js'></script>

And I included it into my components HTML like this:

(我将其包含在组件HTML中，如下所示：)

<form #form id="ktv2-form-192796" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html" >
<input type="hidden" id="FormField_ApiKey" name="apikey" value="xxx" />
<input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element">
<label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br />
<input type="text" id="FormField_EmailAddress" name="email" value="" size="40"/>
</div>
<br />
<div>
<button type="submit" (click)="form.submit()">Search</button>
</div>
</form>

I tried several approaches with the javascript, I put it into

(我用JavaScript尝试了几种方法，将其放入)

• index.html

  (index.html)

• "scripts" section of angular.json and

  (angular.json的“脚本”部分和)

• I dynamically loaded it as described in the link above

  (我按照上面的链接中所述动态加载了它)

With all solutions the javascript is added to head-section of the HTML, but they work exactly one time.

(在所有解决方案中，javascript均已添加到HTML的头部，但它们只能运行一次。)

It seems that somehow the relation between the javascript in the head section and the widget (or the HTML that uses this javascript) is broken after a page change.

(似乎在页面更改后，头部分中的javascript和小部件（或使用此javascript的HTML）之间的关系就被破坏了。)

Do you have any suggestions?

(你有什么建议吗？)

  ask by Igotcha translate from so

Answer 1

等待大神答复