javascript - 加载模板 dom 时 angular2 模板/ Hook 中的脚本标记

Question

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

简化:我有一个基于绑定(bind)创建 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
  }     
}

组件选择器/主机嵌入在由 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>

该站点还使用了基础框架，每次向页面添加新元素时(例如通过绑定(bind)我的组件进行外部更新)我都需要调用 $(document).foundation().

所以我的问题是，当我不知道我的模板是否已完成创建时，我怎样才能在我的模板 DOM 上调用 jquery。在我的组件模板中定义时，onload 处理程序也不起作用。

我读过有关 AfterViewInit 的内容，但我有点不知所措。有人可以把我推向正确的方向吗？

我如何知道我的组件的模板何时完全插入到“主”DOM 中？

Answer 1

组件模板中的脚本标签被移除。解决方法是在 ngAfterViewInit()

中动态创建脚本标签

另见 https://github.com/angular/angular/issues/4903

constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "http://somedomain.com/somescript";
  this.elementRef.nativeElement.appendChild(s);
}

另见 https://stackoverflow.com/a/9413803/217408

更好的方法可能是只使用 require() 来加载脚本。

另见 script tag in angular2 template / hook when template dom is loaded