Foundation 6 Angular2中的粘性元素

這個問題構建了我之前的一個問題：ngOnDestroy and $('#element').foundation('destroy');我基本上是想在我的Angular2應用程序中創建基礎粘滯工作。除了我無法使用ngOnDestroy()銷燬Foundation元素的問題之外，我一般都在與Sticky元素鬥爭。我所擁有的是這樣的：Foundation 6 Angular2中的粘性元素

組件模板

<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(); 
    }

當我做了重新加載整個頁面這個特定視圖，一切都是超級的作品！如果我導航到這個視圖，它不起作用。似乎與重新加載整個頁面

有關在某些時候，我是創造這樣的粘元素：

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

這並沒有對行爲產生任何影響，但我可以打印出對象myStickyElement。

在重新加載整個頁面的對象是這樣的：

在這裏，如果我瀏覽網頁：

正如你所看到的，myStickyElement對象看起來方式不同。缺了點什麼。有沒有人遇到過這個問題？爲什麼整個頁面重新加載如此不同？

來源

2017-03-29 tschaka1904

這是strage，角度應該叫' ngAfterViewInit'在頁面重新加載和在路線導航。請看看這位來自英雄角度遊覽的蹲伏者。我在'ngAfterViewInit'內部的所有三個組件中添加了日誌語句。請打開控制檯並在「heros」和「dashboard」路徑之間導航，您會看到「ngAfterViewInit」的確如我所述的那樣被調用。 https://plnkr.co/edit/Z0MMz5z1PVGnzIsicypV?p=preview –

它調用'ngAfterViewInit'，但基金會似乎行爲不同。 – tschaka1904

使用此：

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

是正確之舉，但是，出於某種原因粘插件無法正常工作。該插件重視的是有一個API，使「與粘性」

這裏的數據對象zfPlugin是你怎麼做：

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

我成立了一個plnkr這裏顯示了這個工作：https://plnkr.co/edit/zPuXooHYsJHuOQUj6Rdd?p=preview

https://github.com/zurb/foundation-sites/blob/develop/js/foundation.sticky.js明確該塊：更新1

在基礎代碼在這裏尋找後

$(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"

來源

2017-04-05 16:56:25

@ ahmed-musallam好東西！它幾乎工作。現在，如果我只是導航到頁面，它也會變成粘滯的，但它不會粘在'wrapperDiv'上。它堅持標題，這也是粘滯，但不同的粘性元素。它似乎是在固定'data-sticky-container'或者將它粘貼到標題或者使其固定_fixed_？再說一遍，如果我在該頁面上完成整頁重新加載，它就可以很好地工作。 – tschaka1904

我加了一個更新，請看看。 –

非常感謝！這工作！ – tschaka1904

Foundation 6 Angular2中的粘性元素

回答

相關問題