加载模板 dom 时，angular2 模板/钩子中的脚本标记 [英] script tag in angular2 template / hook when template dom is loaded

问题描述

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

I'm pretty stuck and don't know how to solve my problem...

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

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 流中，用于替换预定义的 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>

该站点也使用基础框架，每次向页面添加新元素时(例如通过外部更新我的组件的绑定)我需要调用 $(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.

我已经阅读了 AfterViewInit，但我对它有点不知所措.有人能把我推向正确的方向吗?

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

如何知道我的组件的模板何时完全插入到主"DOM 中?

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.appendChild(s);
}

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

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

A better way might be to just use require() to load the script.

另见 脚本加载模板 dom 时在 angular2 模板/钩子中标记

这篇关于加载模板 dom 时，angular2 模板/钩子中的脚本标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！