Javascript 加载模板dom时angular2模板/挂钩中的脚本标记

我很困，不知道如何解决我的问题

简化：我有一个基于绑定创建ulist的组件，如下所示：

@Component({
   selector: "template",
   template: `
     <ul>
       <li *ng-for="#challenge of jobs.challenges">{{challenge}}</li>
     </ul>
   `})
export class JobTemplate{
  jobs: Jobs;
  constructor(jobs:Jobs){
    this.jobs = jobs
  }     
}

@组件({
选择器：“模板”，
模板：`

{{challenge}

`})
导出类作业模板{
工作：工作；
构造函数（作业：作业）{
this.jobs=jobs
}     
}

组件选择器/主机嵌入在php响应的正常html流中，用于替换预定义的ulist。问题在于，在普通站点上，ulist之后的脚本标记用于在列表上应用jquery魔术

由于脚本标记在我的组件的模板完成加载之前被回响，jquery调用将找不到我的模板DOM的元素。将脚本标记放在我的模板中（最后）不起作用；它似乎只是被忽视了

<ul>
  <a><li *ng-for="#challenge of jobs.challenges">{{challenge}}</li></a>  
</ul>
<script>
   $("ul a").on("click", function (event)
        {
        var parent = $(this).parent();
        if(parent.hasClass('active'))
          ....slideToggle("normal");
        else
        ....
        });
</script>

{{challenge}

$（“ul a”）。在（“单击”）上，功能（事件）
{
var parent=$（this.parent（）；
if（parent.hasClass（'active'））
..滑动切换（“正常”）；
其他的
....
});

站点也使用基础框架，每次在页面中添加新元素（例如，通过我的组件的外部更新绑定），我需要调用<代码> $（文档）。 所以我的问题是，当我不知道我的模板是否已经完成创建时，如何实现在我的模板DOM上调用jquery。在我的组件模板中定义时，onload处理程序也不起作用

我读过关于AfterViewInit的文章，但我有点不知所措。 有人能把我推到正确的方向吗

---

如何确定组件的模板何时已完全插入“主”DOM？

删除组件模板中的脚本标记。解决方法是在

ngAfterViewInit（）中动态创建脚本标记

另见

另见

更好的方法可能是使用
require（）
加载脚本

另请参见
我遇到了相同的问题，但另外我必须加载许多脚本，其中一些可以并行加载，另一些可以串行加载。如果您正在使用本机支持ES3/ES5并将其传输到ES3/ES5，则此解决方案将起作用：

async ngAfterViewInit() {
  await this.loadScript("http://sub.domain.tld/first-script.js")
  await this.loadScript("http://sub.domain.tld/second-script.js")
}

private loadScript(scriptUrl: string) {
  return new Promise((resolve, reject) => {
    const scriptElement = document.createElement('script')
    scriptElement.src = scriptUrl
    scriptElement.onload = resolve
    document.body.appendChild(scriptElement)
  })
}

对于任何可以并行加载的脚本，您可以利用：

注意：对于承诺拒绝，您可以尝试在
loadScript（）
函数中使用
scriptElement.onerror=reject
，但是，在这种情况下，我遇到了一些奇怪的行为。如果希望脚本无论如何都能继续加载，则可能需要尝试在调用OneError时解析承诺。
根据for AfterViewInit，您可以尝试将方法ngAfterViewInit（）添加到组件中，并在组件中调用jQuery代码。@MarkRajcok+1。请注意，您必须在ViewInit之后实现
。另外请注意，您确实希望避免使用jQuery（支持使用模板和数据绑定解决方案），除非在Angular2n中绝对必要，否则无论是
AfterViewInit
还是
AfterContentInit
在我的模板完全加载时触发（模板怎么可能绑定到异步交付的源代码）。我决定在模板本身中创建处理程序，使用
#a（click）=“addHandler（a）”
，并在绑定更改时使用
afterview checked
应用
jQuery（document）.foundation（）
。谢谢谢谢你。当我发帖时，我刚开始用angular，我完全用错了方法。它只是将单击处理程序添加到模板元素中，当然，使用angular2的模板语法更方便，在本例中是
。当然，最好不要使用外部脚本：）
async ngAfterViewInit() {
  await this.loadScript("http://sub.domain.tld/first-script.js")
  await this.loadScript("http://sub.domain.tld/second-script.js")
}

private loadScript(scriptUrl: string) {
  return new Promise((resolve, reject) => {
    const scriptElement = document.createElement('script')
    scriptElement.src = scriptUrl
    scriptElement.onload = resolve
    document.body.appendChild(scriptElement)
  })
}

async ngAfterViewInit() {
  await Promise.all([
    this.loadScript("http://sub.domain.tld/first-parallel.js"),
    this.loadScript("http://sub.domain.tld/second-parallel.js")
  ])
  await this.loadScript("http://sub.domain.tld/after-parallel.js")
}