角度：组件中的外部Javascript只能工作一次

在我的Angular应用程序中包含带有javascript部分的第三方小部件时，我遇到了一些问题。我阅读并尝试了如下解决方案

这些都能起作用，但只有一次。如果我改变了路线，我返回，或者它们显示在另一个网页上，它们就会停止工作

我喜欢在我的Angular应用程序的边栏中包含这些作为Angular组件的第三方小部件。第三方小部件，例如，看起来像这样（这是来自第三方的代码）：

我的电子邮件地址：

我将其包含在我的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>

我的电子邮件地址：



搜寻

我用javascript尝试了几种方法，并将其应用到

• index.html
• angular.json的“脚本”部分和
• 我按照上面链接中的描述动态加载了它

对于所有的解决方案，javascript都被添加到HTML的head部分，但它们只工作一次。在页面更改之后，head部分中的javascript与小部件（或使用此javascript的HTML）之间的关系似乎以某种方式被打破

---

你有什么建议吗？

试着用ngOnInit而不是construtor来加载。@Bálint Réthy，我有，同样的结果。正如我所写的，所有3种方法都可以工作，javascript在head部分。但是，当我切换到另一个页面并使用小部件返回页面后，它就不再工作了——尽管javascript仍然在页眉部分。

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