Angular2 中的基础 6 粘性元素 [英] Foundation 6 Sticky element in Angular2

问题描述

这个问题建立在我之前的一个问题之上:

如果我导航到该页面:

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

解决方案

使用这个:

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

是正确的举动，但是，由于某种原因，粘性插件不起作用.该插件附加了一个数据对象 zfPlugin，它有一个 api 来启用粘性"

这是你的做法:

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

我在这里设置了一个 plnkr 来显示这个工作:https://plnkr.co/编辑/zPuXooHYsJHuOQUj6Rdd?p=preview

更新 1

在这里查看基础代码后:https://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js 特别是这个块:

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

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

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

这是我所做的更新:

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

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

This question builds on 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:

Component Template

<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>

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

In my component I use this in my ngAfterViewInit:

Component

  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 doesn't work. Seems to be related with the full page reload

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

let myStickyElement = new Foundation.Sticky($('#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:

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?

解决方案

using this:

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

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'

here is how you do it:

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

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

UPDATE 1

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(){
...
}

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.

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

here are the updates I made:

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

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

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