Question

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

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

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

这让我觉得有一个更好的地方让我调用将充分利用Angular事件的destroy函数。任何人都可以帮我解决这个问题吗？谢谢！

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元素的类/标志之前检查它是否已初始化（假设这不会在您的ajax调用中被修改）。

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

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

Answer 2

使用路由器：

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

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

var initialized = false;

用这个替换底部初始化程序：

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

在角度应用

2 个答案:

更新