angular4 在组件加载时清除外部脚本答案

【问题标题】：angular4 Clear external script on component loadangular4 在组件加载时清除外部脚本
【发布时间】：2017-05-30 06:22:12
【问题描述】：

我正在尝试在 angular4 上重写我的 jquery 网站。在我的主组件中，我正在使用此函数加载一个外部 .js 文件：

public loadScript(url) {
        console.log('preparing to load...')
        let node = document.createElement('script');
        node.src = url;
        node.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(node);
}

在我开始在页面之间导航之前它运行良好。问题是每次加载脚本时，它都会在我网站的不同部分应用动画，所以当我导航到某个地方并返回时，动画会应用两次，这看起来很奇怪。

对于 Angular 方面的专家，请不要建议我完全用 Angular 重写代码。

我的问题是，如何刷新或刷新所有之前加载的 js 对组件负载的影响？

有可能吗？如果是的话，请你给我建议一下。

我的第二个问题是导致所有这些行为的原因是什么？是jquery层与角完全分离？

PS。我尝试过其他方法的外部脚本加载，但所有这些都以这种方式结束。如果我想快速将现有的小型项目转换为 Angular，这种方法非常有用。

更新 1： 脚本在 onAfterViewInit() 中加载，如下所示： this._dataService.loadScript('/assets/js/home.js');

我无法访问这些功能，但动画和效果已应用于元素，这对我的目标来说已经足够了。

【问题讨论】：

你能把你如何调用这个所谓的外部函数的代码和它的含义一样吗？奇怪的问题。

标签： javascript jquery angular angularjs-directive

【解决方案1】：

基本上我找到了一个简单的解决方案。每次加载组件时，我都会生成一个随机的 uuid 编号并将其应用于我的 html 标签。然后加载外部脚本时，它不会影响我当前的元素并且一切都正确显示。

外部 JS：

function textLoader(uid) {

    var u = $("div."+uid+"[id^='block-']").hide(),
    h = 0;

    if (function d() {

        $("."+uid+" .text-block").hide();
...

组件 TS：

constructor(private _dataService : DataService, private userService : UserService)
    {
        console.log('home constructor');

        this.uuid = "cc_" + this._dataService.getUUID();
    ...

ngAfterViewInit() {

        this._dataService.loadScript('/assets/js/home.js');     
        textLoader(this.uuid);

如果您对我的方法或任何其他可能的解决方案有您的个人看法，我会很高兴听到。我在 angular2 方面只有中级知识，当然这种代码是不可取的。

【讨论】：