只是遇到了 Angular4 应用程序的问题......的确，我已经掌握了外部脚本文件，这些文件适用于我目前正在处理的主题。
问题如下。 脚本文件只触发一次（当它们加载时），但是我需要在某些页面上触发它们......我怎么能这样做？ 删除并重新加载脚本文件？我很确定这是最糟糕的做法...但我找不到任何其他解决方案。
有人有想法吗？
感谢的
我开发了一项允许我加载和删除脚本的服务。它运作良好，但我确信它不是最好的解决方案......
我的服务
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
interface ScriptObject {
path: string;
class?: string;
}
@Injectable()
export class ScriptsManagerService implements ScriptObject{
path : string;
class : string;
private initIndexScriptPath = 0;
private indexScriptPath:number = 0;
private nbFichierScriptLoaded: number = 0;
private scriptsToLoad: Array<ScriptObject>;
private scriptsToRemove: Array<ScriptObject>;
private showMessageCallback:boolean = false;
constructor() {
}
/**
* Fonction qui permet de charger dynamiquement des scripts sur une page
* @param scriptsToLoad - Liste des scripts à charger
* @param callbackMessage - Fonction de rappel pour afficher une réponse lorsque que les scripts sont chargés
*/
public loadScriptsFiles = function(scriptsToLoad : Array<ScriptObject>, callbackMessage?: boolean) {
if(typeof callbackMessage !== 'undefined')
this.showMessageCallback = callbackMessage;
if(typeof this.scriptsToLoad === 'undefined')
this.scriptsToLoad = scriptsToLoad;
this.iterateNextScript(scriptsToLoad[this.indexScriptPath], "Script added with success", () =>{
if( this.indexScriptPath < scriptsToLoad.length ) {
// Charge le script à l'index défini
let script = document.createElement('script');
document.body.appendChild(script);
script.type = "text/javascript";
script.src = scriptsToLoad[this.indexScriptPath].path;
if(typeof scriptsToLoad[this.indexScriptPath].class !== "undefined")
script.className = scriptsToLoad[this.indexScriptPath].class;
// Créer le nom de la class qui sera ajouté à la balise script
let nameScript: Array<string> = scriptsToLoad[this.indexScriptPath].path.split("/");
let uniqueNameScript = nameScript[nameScript.length - 1].replace(/\./g,"");
uniqueNameScript = uniqueNameScript.replace(/-/g,"");
uniqueNameScript = uniqueNameScript.replace(/_/g,"");
uniqueNameScript = uniqueNameScript.toLocaleLowerCase();
script.id = "addedScript-uniqueId-" + uniqueNameScript + "-" + [this.indexCssPath];
// Récupère l'index suivant du script
this.indexScriptPath++;
// Ecoute l'évènement de chargement sur le script
Observable.fromEvent(script,'load')
.subscribe(() => {
if(this.nbFichierCssLoaded == scriptsToLoad.length-1){
this.indexScriptPath = 0;
this.nbFichierScriptLoaded = 0;
}else{
this.loadScriptsFiles(scriptsToLoad, true);
this.nbFichierScriptLoaded++;
}
}
);
}
});
}
public removeScriptsFiles = function(scriptsToRemove : Array<string>, callbackMessage?: boolean) {
if(typeof callbackMessage !== 'undefined')
this.showMessageCallback = callbackMessage;
if(typeof this.scriptsToRemove === 'undefined')
this.scriptsToRemove = scriptsToRemove;
this.iterateNextScript(scriptsToRemove[this.indexScriptPath], "Script remove with success", () =>{
if( this.indexScriptPath < scriptsToRemove.length ) {
// Supprime le/les script(s) des class associées
document.getElementsByClassName(scriptsToRemove[this.indexScriptPath]);
this.loadScriptsFiles(scriptsToRemove, true);
if(this.nbFichierScriptLoaded == scriptsToRemove.length-1){
this.indexScriptPath = 0;
this.nbFichierScriptLoaded = 0;
}else{
document.getElementsByClassName(scriptsToRemove[this.indexScriptPath]);
this.removeScriptsFiles(scriptsToRemove, true);
this.nbFichierScriptLoaded++;
}
// Récupère l'index suivant du script
this.indexScriptPath++;
}
});
}
private iterateNextScript = function(msg, textMessage, callback) {
if(this.indexScriptPath < this.scriptsToLoad.length){
console.log(textMessage + " : " + msg);
callback();
}
}
}
我的组件
import { Component } from '@angular/core';
import { ScriptsManagerService } from '../../../app/services/script_manager/scripts-manager.service';
import { CssManagerService } from '../../../app/services/css_manager/css-manager.service';
@Component({
selector: 'ae-sidebar-composant',
templateUrl: './sidebar-composant.component.html',
styleUrls: ['./sidebar-composant.component.css']
})
export class SidebarComposantComponent {
constructor(private scriptsService: ScriptsManagerService, private cssService: CssManagerService) { }
ngAfterContentInit(){
this.scriptsService.loadScriptsFiles([
{
path : "/assets/plugins/modernizr.custom.js"
},
{
path : "/assets/plugins/pace/pace.min.js"
},
{
path : "/assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"
},
{
path : "/assets/plugins/bootstrapv3/js/bootstrap.min.js"
},
{
path : "/assets/plugins/jquery/jquery-easy.js"
},
{
path : "/assets/plugins/handlebars/handlebars-v4.0.5.js"
},
{
path : "/assets/plugins/jquery-unveil/jquery.unveil.min.js"
},
{
path : "/assets/plugins/jquery-bez/jquery.bez.min.js"
},
{
path : "/assets/plugins/jquery-ios-list/jquery.ioslist.min.js"
},
{
path : "/assets/plugins/jquery-actual/jquery.actual.min.js"
},
{
path : "/assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"
},
{
path : "/assets/plugins/select2/js/select2.full.min.js"
},
{
path : "/assets/plugins/classie/classie.js"
},
{
path : "/assets/plugins/switchery/js/switchery.min.js"
},
{
path : "/assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"
},
{
path : "/assets/plugins/jquery-autonumeric/autoNumeric.js"
},
{
path : "/assets/plugins/dropzone/dropzone.min.js"
},
{
path : "/assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js"
},
{
path : "/assets/plugins/jquery-inputmask/jquery.inputmask.min.js"
},
{
path : "/assets/plugins/bootstrap-form-wizard/js/jquery.bootstrap.wizard.min.js"
},
{
path : "/assets/plugins/jquery-validation/js/jquery.validate.min.js"
},
{
path : "/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"
},
{
path : "/assets/plugins/summernote/js/summernote.min.js"
},
{
path : "/assets/plugins/moment/moment.min.js"
},
{
path : "/assets/plugins/bootstrap-daterangepicker/daterangepicker.js"
},
{
path : "/assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"
},
{
path : "/assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"
},
{
path : "/assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"
},
{
path : "/assets/plugins/handlebars/handlebars-v4.0.5.js"
},
{
path : "/assets/plugins/bootstrap-collapse/bootstrap-tabcollapse.js"
},
{
path : "/assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js"
},
{
path : "/assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js"
},
{
path : "/assets/plugins/jquery-datatable/media/js/dataTables.bootstrap.js"
},
{
path : "/assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js"
},
{
path : "/assets/plugins/datatables-responsive/js/datatables.responsive.js"
},
{
path : "/assets/plugins/datatables-responsive/js/lodash.min.js"
},
{
path : "/assets/js/datatables.js"
},
{
path : "/assets/js/tables.js"
},
{
path : "/assets/pages/js/pages.min.js"
},
{
path : "/assets/js/scripts.js"
}
], false);
}
}