Angular2中的Foundation 6 Sticky元素

问题描述

此问题建立了我以前的问题之一: ngOnDestroy和$('#element').foundation( 'destroy'); 我基本上是想在我的Angular2应用程序中使Foundations Sticky正常工作.除了不能使用ngOnDestroy()销毁Foundation元素的问题外，我通常还会与Sticky元素作斗争.我所拥有的是:

This question build one of my earlier questions: ngOnDestroy and $('#element').foundation('destroy'); I'm basically trying to make Foundations Sticky work in my Angular2 application. Apart of the issue that I can't destroy the Foundation element, using ngOnDestroy(), I struggle with the Sticky element in general. What I have is this:

<div id="wrapperDiv">
        <div class="columns medium-2 no-pad-left" data-sticky-container>
          <div id="myStickyElement" class="sticky" data-sticky data-top-anchor="wrapperDiv">
            <aside>
              <ul class="menu vertical">
                <li><a href="#elm1">Elm1</a></li>
                <li><a href="#eml2">Eml2</a></li>
                <li><a href="#eml3">Eml3</a></li>
                <li><a href="#eml4">Eml4</a></li>
              </ul>
            </aside>
          </div>
        </div>
</div>

重要的是要说wrapperDiv是直接加载的，并且其父级中没有ngIf条件.

It might be important to say that wrapperDiv is loaded directly and has no ngIf condition in it's parents.

在我的组件中，我在ngAfterViewInit中使用它:

In my component I use this in my ngAfterViewInit:

  ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
  }

当我在此特定视图上执行整页重新加载时，一切都超级好且有效！如果我导航到该视图，它将不起作用.似乎与整页重新加载

When I do a full page reload on this specific view, everything is super and works! If I navigate to this view, it it doesn't work. Seems to be related with the full page reload

在某些时候，我正在像这样创建Sticky元素:

On some point I was creating the Sticky element like this:

let myStickyElement = new Foundation.Sticky($('#myStickyElement'));

对行为没有任何影响，但是我可以打印出对象myStickyElement.

Which did not have any impact on the behaviour, but I could print out the object myStickyElement.

在整个页面上重新加载对象，如下所示:

On full page reload the object looks like this:

在这里，如果我导航到该页面:

And here if I navigate to the page:

如您所见，myStickyElement的对象看起来非常不同.缺了点什么.有人遇到过这个问题吗?为什么整页重新加载有很大不同?

As you can see, the object of myStickyElement looks way different. Something is missing. Has anyone come across this problem before? Why is the full page reload so much different?

推荐答案

使用此方法:

ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
}

是正确的做法，但是由于某些原因，粘性插件无法正常工作.该插件会附加一个数据对象zfPlugin，该对象具有一个用于启用粘滞性"的api

is the correct move, however, for some reason the sticky plugin is not working. The plugin attaches a data object zfPlugin that has an api to enable 'stickyness'

这是您的操作方式:

ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
    $('#myStickyElement').data("zfPlugin")._setSticky();
}

我在此处设置了显示此功能的plnkr: https://plnkr.co/edit/zPuXooHYsJHuOQUj6Rdd?p =预览

I set up a plnkr here that shows this working: https://plnkr.co/edit/zPuXooHYsJHuOQUj6Rdd?p=preview

更新1

在此处查看基础代码后: https ://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js 特别是以下代码块:

After looking at the foundation code here: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js specifically this block:

$(window).one('load.zf.sticky', function(){
...
}

粘性插件正在等待事件load.zf.sticky被触发，它发生在静态页面中，因为Foundation知道这些元素在页面上.由于它属于角度分量，因此您必须自己触发该事件.

The sticky plugin is waiting for an event load.zf.sticky to be triggered, it happens in static pages because foundation knows those elements are on the page. Since it's in angular component, you have to trigger that event yourself.

我在这里更新了plunkr: https://plnkr.co/edit/1P6oU5ZrdKHGlMeHYUUw? p =预览

I have updated the plunkr here: https://plnkr.co/edit/1P6oU5ZrdKHGlMeHYUUw?p=preview

这是我所做的更新:

  ngAfterViewInit(): void {
    $('#myStickyElement').foundation();
    $(window).trigger('load.zf.sticky');
  }

注意:在html中，我添加了data-sticky-on="small"

Note: in html I added data-sticky-on="small"

这篇关于Angular2中的Foundation 6 Sticky元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！