在Angular 2中與Foundation 6一起工作

據我所知，當我想使用foundation時，我應該在每個組件中放置$（this.elementRef.nativeElement）.foundation（）。但我不明白我該怎麼做。在Angular 2中與Foundation 6一起工作

例如，我需要在懸停時使用下拉菜單。

<div data-toggle="skill-dropdown">Skills</div> 
<div id="skill-dropdown" data-dropdown data-hover="true" data-hover-pane="true"> 
    <ul> 
     <li *ngFor="let skill of skillsList"> 
     <div>{{skill.title}}</div> 
     </li> 
    </ul> 
</div>

像AfterViewInit或AfterContentInit這樣的角度鉤子在這種情況下不起作用。

至於解決辦法，我應該使用的setTimeout：

setTimeout(() => { 
    $(this.elementRef.nativeElement).foundation(); 
}, 5000);

是否有這個任務其他一些很好的解決方案？

P.S $（document）.foundation（）也不起作用。

來源

2016-08-17 Illorian

它真的需要'5000'（5秒）還是它也適用於'1000'（1秒）？你可以請添加組件和它的HTML以及 –

@PankajParkar模板的主要部分有問題。在組件中我沒有邏輯，只有硬編碼數組。 – Illorian

由於我沒有發現任何基礎工作的解決方案JavaScript和角2在我的主/應用組件

export class MainComponent implements OnInit { 

    private _router: Router; 

    constructor(router: Router) { 
     this._router = router; 
    } 

    public ngOnInit() { 
     this._router.events.subscribe((event: any) => { 
      if(event instanceof NavigationEnd) { 
       jQuery(document).foundation(); 
      } 
     }); 
    } 
}

這適用於大多數簡單的事情正確，我堅持了這方面的工作。基金會軌道有這個用法的一些問題。我仍然希望，Zurb很快就會展示Foundation Apps 2，因此Foundation Sites可以用原生Angular 2指令取代JavaScript。

對於您的問題，您可能會檢查是否將$(this.elementRef.nativeElement).foundation()添加到組件作品的ngOnInit()中。最好是在ngOnInit()中使用類似new Foundation.Dropdown(this.elementRef.nativeElement);的東西，但我也沒有得到它的正常工作。

也許一些提示可能會幫助您創建一個工作解決方案。希望聽到您是否能使其工作。

來源

2016-08-29 12:20:54 DaSch

在Angular 2中與Foundation 6一起工作

回答

相關問題