Question

这个问题构建了我之前的一个问题：ngOnDestroy and $('#element').foundation('destroy');我基本上试图在我的Angular2应用程序中使基础粘性工作。除了我无法使用ngOnDestroy()破坏Foundation元素的问题之外，我总是在使用Sticky元素。我有这个：

组件模板

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

中使用此功能

组件

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

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

有关

在某些方面，我正在创建像这样的Sticky元素：

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

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

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

如果我导航到页面，请点击此处：

正如您所看到的，myStickyElement的对象看起来有所不同。缺了点什么。有没有人遇到过这个问题？为什么整页重装的程度如此之大？

Answer 1

使用：

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

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

这是你如何做到的：

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，它发生在静态页面中，因为基础知道这些元素在页面上。因为它是角度分量，你必须自己触发该事件。

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

以下是我所做的更新：

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

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

基础6在Angular2中的粘性元素

1 个答案: