在angular2模板/挂机脚本标签模板时，DOM是装 [英] script tag in angular2 template / hook when template dom is loaded

问题描述

我是pretty卡住，不知道如何解决我的问题...
简单：我有一个创建基于绑定一个ulist，这样的组件：

i'm pretty stuck and don't know how to solve my problem... simplified: i have a component that creates a ulist based on a binding, like this:

@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流和用于替换一个predefined ulist。问题是，在正常的现场，ulist后的脚本代码被用于应用列表上的一些jquery的魔法。

The component selector/host is embedded in normal html flow echoed by php and is used to replace a predefined ulist. The problem is that on the normal site, a script tag after the ulist was used to apply some jquery magic on the list.

由于脚本标签我的组件的模板之前，呼应了加载完毕，jQuery的通话不会找到我的模板的DOM元素。把脚本标签我的模板里（末）不工作;它只是似乎被忽略。

Since the script tag is echoed out before the template of my component has finished loading, the jquery calls won't find the elements of my template dom. Putting the script tag inside my template (at the end) does not work; it simply seems to get ignored.

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

另外，网站使用的基础架构，每一次新的元素（通过我的组件的结合被外部更新EG）添加到页面中我需要调用的$（document）.foundation（）。

Also the site uses the foundation framework, and each time a new element is added to the page (e.g through the binding of my component being updated externally) i need to call $(document).foundation().

所以我的问题是，我怎么能实现打电话给我的模板DOM jQuery的，当时我不知道是不是我的模板已完成创建。在我的组件模板中定义时onload处理无法正常工作或。

So my question is, how can i achieve to call jquery on my template dom, when i don't know if my template has finished being created. The onload handler doesn't work either when defined in my component template.

我看了abourt AfterViewInit，但我是那种与它不堪重负。
可能有人请把我在正确的方向？

I have read abourt AfterViewInit, but i'm kind of overwhelmed with it. Could someone please push me in the right direction?

TL;博士：我如何才能找到我时，组件的模板已被完全插入到主DOM

tl;dr: How can i find out when the template of my component has been fully inserted into the "main" DOM?

推荐答案

在组件模板脚本标记将被删除。一种解决方法是在 ngAfterViewInit（）

Script tags in component templates are removed. A workaround is to create the script tag dynamically in 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.append(s);
}

另请参阅 http://stackoverflow.com/a/9413803/217408

这篇关于在angular2模板/挂机脚本标签模板时，DOM是装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！