在 angular 应用中多次初始化 fullpage.js

Question

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

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

当我从一个使用该插件的页面导航到另一个不使用它的页面，然后返回时，这按我预期的方式工作（插件被销毁并在下次遇到时重新初始化）到确实使用它的第三页。但是，如果省略该中间步骤并且我直接从一个使用整页的路由导航到第二个也使用它的路由，则插件无法正确初始化。我的意思是控件不起作用。

这让我觉得有一个更好的地方让我调用 destroy 函数，它将适当地利用 Angular 事件。谁能帮我解决这个问题？？谢谢！

Answer 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 元素的 class/flag 之前检查它是否被初始化（假设这在你的 ajax 来电）。

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

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

Answer 2

使用路由器：

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

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

var 初始化 = false;

将底部初始化程序替换为：

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

在 angular 应用中多次初始化 fullpage.js

Initializing fullpage.js multiple times in an angular app

angularjs

fullpage.js

更新：