在 Angular 应用程序中多次初始化 fullpage.js答案

【问题标题】：Initializing fullpage.js multiple times in an angular app在 Angular 应用程序中多次初始化 fullpage.js
【发布时间】：2015-07-26 13:14:33
【问题描述】：

我正在构建一个 Angular 应用程序，它在几个页面中使用 fullpage.js。目前，我正在使用模板中的自定义指令为使用它的每个路由初始化整页（例如 $('#this-routes-fullpage').fullpage({ options... }) ）。在每个自定义指令的末尾，我调用了

scope.$on('$routeChangeStart', function() {
    $.fn.fullpage.destroy('all');
}

当我从一个使用插件的页面导航到另一个不使用它的页面，然后返回到确实使用它的第三页。但是，如果省略了该中间步骤，并且我直接从一个使用 fullpage 的路由导航到另一个也使用它的路由，则插件无法正确初始化。我的意思是控件不起作用。

这让我觉得有一个更好的地方可以让我调用销毁函数，以充分利用 Angular 事件。谁能帮我解决这个问题？？谢谢！

【问题讨论】：

标签： angularjs fullpage.js

【解决方案1】：

更新：

现在您可以使用the official Angular component for fullPage.js。

只要在您初始化它的任何时间和任何地点销毁它。就在初始化之前，例如：

//destroying
if (typeof $.fn.fullpage.destroy == 'function') { 
    $.fn.fullpage.destroy('all');
}

//initializing 
$('#fullpage').fullpage();

或者您可以在检查 fullPage.js 添加到您的 html 元素的类/标志之前检查它是否已初始化（假设这不会在您的 ajax 调用中被修改）。

//destroying
if($('html').hasClass('fp-enabled')){
    $.fn.fullpage.destroy('all');
}

//initializing 
 $('#fullpage').fullpage();

【讨论】：

【解决方案2】：

使用路由器：

如果您在 Angular 4 中使用路由器，您可以简单地在 ngx-fullpage 组件指令中编辑 mnFullpage.directive.js。在顶部为“初始化”添加一个布尔值，然后执行一个简单的 if 语句。如果整页已初始化，则销毁（'all'）。这样，当您使用路由器从一个页面转到另一个页面时，它们仍将保留 fullpage.js 功能。

转到 ngx-fullpage\components\fullpage\mnFullpage.directive.js
向下滚动到 ngOnInit 函数
将此变量添加到页面顶部（在 var DIRECTIVE_NAME 下）

变量初始化=假；

用这个替换底部的初始化器：

/**
 * Enable fullpage for the element
 */
if(initialized)
{
  $.fn.fullpage.destroy('all');
}
$(this._el.nativeElement).fullpage(this.options);
initialized   = true;

【讨论】：