ファウンデーション6と角度2で作業する

Question

私が知っているように、私はuse foundationを使いたいときは、各コンポーネントに$（this.elementRef.nativeElement）.foundation（）を入れてください。しかし、私はそれをどうすればいいのか理解できませんでした。

たとえば、ホバーでドロップダウンを使用する必要があります。

<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（）も機能しません。私のメイン/アプリケーションコンポーネントで

Answer 1

私が正しく動作するためには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(); 
      } 
     }); 
    } 
} 

これは最も簡単なもののために動作します。 Foundation Orbitはこの使用法にいくつか問題があります。私はまだZurbがFoundation Apps 2をすぐに公開することを願っています。Foundation Sites JavaScriptはネイティブのAngular 2ディレクティブに置き換えることができます。

ご質問の場合は、$(this.elementRef.nativeElement).foundation()をコンポーネントのngOnInit()に追加するかどうかをご確認ください。 new Foundation.Dropdown(this.elementRef.nativeElement);のようなものを使用するのがベストでしょうが、ngOnInit()でも正しく動作するようにはなりませんでした。

多分、ヒントのいくつかは、実際の解決策を作成するのに役立つかもしれません。あなたがそれを働かせることができるかどうか聞いてみたいと思います。