angular2とmaterializecssの統合

Question

私は、angle2を使ってHashLocationStrategyを使用するWebアプリケーションを構築しています。 テンプレートにmaterializecss jqueryベースのコンポーネントを追加しようとするまでは問題ありません。例えば

ここでは、ナビゲーションバーの崩壊ボタン

<a href="#" data-activates="nav-mobile" class="button-collapse"> 
    <i class="material-icons">menu</i> 
</a> 

角度のサンプルは、ルート・パスとしてこれを扱いますし、メインページに

をナビゲートしますで、この問題のためにすべての作業-ラウンドはありますか？

Answer 1

あなた自身が言ったように、materializecssはjqueryベースです。つまり、動的動作をアクティブにするにはjqueryが必要です。あなたの場合、$(".button-collapse").sideNav();をページの$(document).ready(function(){})コードのどこかに追加する必要があります。

https://www.npmjs.com/package/angular2-materializeをご覧ください。このlibは、正確にこの動的挙動をangular2に追加します。あなたのangular2コンポーネントで「MaterializeDirective」をインポートした後、あなたは、単にあなたのアンカータグにmaterialize="sideNav"を追加することができ、それが動作するはずです：

<a href="#" materialize="sideNav" data-activates="nav-mobile" class="button-collapse"> 
    <i class="material-icons">menu</i> 
</a>