Angular2 中的基础 6 粘性元素

Question

这个问题建立在我之前的一个问题之上：ngOnDestroy and $('#element').foundation('destroy');我基本上是在尝试让 Foundations Sticky 在我的 Angular2 应用程序中工作。除了无法使用 ngOnDestroy() 破坏 Foundation 元素的问题外，我一般都在与 Sticky 元素作斗争。我有的是：

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>

可能重要的是 wrapperDiv 是直接加载的，在其父项中没有 ngIf 条件。

在我的组件中，我在 ngAfterViewInit:

中使用了它

Component

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

当我在这个特定视图上执行 整页重新加载 时，一切都超级好用！如果我导航到这个视图，它不起作用。似乎与整页重新加载

有关

在某些时候，我是这样创建 Sticky 元素的：

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

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

在整页重新加载时，对象如下所示：

如果我导航到页面：

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

Answer 1

使用这个：

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

是正确的举动，但是，由于某种原因，粘性插件无法正常工作。该插件附加了一个数据对象 zfPlugin，它有一个 api 以启用 'stickyness'

这是您的操作方法：

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

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

更新 1

在这里查看基础代码后：https://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js 具体来说这个块：

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

粘性插件正在等待事件 load.zf.sticky 被触发，它发生在静态页面中，因为基础知道这些元素在页面上。由于它在 angular 组件中，因此您必须自己触发该事件。

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

以下是我所做的更新：

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

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

Angular2 中的基础 6 粘性元素

Foundation 6 Sticky element in Angular2

jquery

zurb-foundation

angular-cli

angular