Jquery 基础6粘性元素在角2

这个问题构建了我之前的一个问题：我基本上是想让基础在我的Angular2应用程序中工作。除了不能破坏基础元素的问题之外，使用<代码> nGunDebug（）/代码>，我通常与粘性元素进行斗争。我所拥有的是：

组件模板

当我在这个特定的视图上重新加载一整页时，一切都是超级的并且正常工作！如果我导航到此视图，它将不起作用。似乎与整页重新加载有关

在某一点上，我创建了如下粘性元素：

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

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

myStickyElement

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

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

如您所见，

myStickyElement

的对象看起来完全不同。有些东西不见了。以前有人遇到过这个问题吗？为什么整个页面的重新加载如此不同？

使用以下方法：

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

但是，由于某些原因，粘性插件无法正常工作。该插件附加了一个数据对象

zfPlugin

，该对象具有一个启用“粘性”的api

以下是您的操作方法：

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

我在这里设置了一个plnkr，它显示了这一点：

更新1

在这里查看基础代码：特别是这个块：

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

粘性插件正在等待一个事件<代码>加载.ZF.Stask，它会发生在静态页面中，因为Fielo知道这些元素在页面上。因为它是角度分量，你必须自己触发那个事件

我已在此处更新了plunkr：

以下是我所做的更新：

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

---

注意：我在html中添加了

data sticky on=“small”

这是strage，angular应该在页面重新加载和路由导航时调用

ngAfterViewInit

。请看这张从《英雄之角之旅》中改编而来的plunker。我向

ngAfterViewInit

中的所有三个组件添加了日志语句。请打开控制台并在“heros”和“dashboard”路由器之间导航，您将看到

ngAfterViewInit

确实如我所述被调用。它称之为<代码> NGReleVivie，但基金会的行为似乎不同。伟大的东西艾哈迈德MasalAM！它几乎可以工作。现在，如果我只导航到页面，它也会变得粘乎乎的，但它不会粘到

wrapperDiv

。它粘附在标题上，标题也是粘性的，但它是一个不同的粘性元素。它似乎正在修复

数据粘性容器

或将其粘贴到标题或使其固定？同样，如果我在那个页面上重新加载一整页，它就可以正常工作了。

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

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