Question

我正在尝试在angular4上重写我的jquery网站。在我的home组件中，我正在使用此函数加载外部.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);
}

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

请那些有角度专家的人，不要建议我用角度完全重写代码。

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

有可能吗？如果是的话，请你就此提出建议。

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

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

更新1： 脚本加载在onAfterViewInit（）中，如下所示： this._dataService.loadScript（ '/资产/ JS / home.js'）;

我无法访问这些功能，但动画和效果会应用于元素，这足以实现我的目标。

Answer 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有一个中间知识，当然这种代码是不可取的。

angular4清除组件加载的外部脚本

1 个答案: