このjQueryコードをAngularJS 2アプリケーションに追加するにはどうすればいいですか

materialize-cssを含めたいと思います。私はjQuery.min.jsと必要なcssとjsファイルをscript.htmlを使ってindex.htmlに含めました。私は折り畳み式のnav-barを作りました。初期化スクリプトが必要です。 nav-barを初期化するためにスクリプトをどこに置くべきですか？以下はjQueryコードです。このjQueryコードをAngularJS 2アプリケーションに追加するにはどうすればいいですか

$(document).ready(function(){ 
     $(".button-collapse").sideNav(); 
    })

私nav.component.htmlコードが

<nav> 
     <div class="nav-wrapper"> 
     <a href="#!" class="brand-logo">Logo</a> 
     <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul class="right hide-on-med-and-down"> 
     <li><a href="sass.html">Sass</a></li> 
     <li><a href="badges.html">Components</a></li> 
     <li><a href="collapsible.html">Javascript</a></li> 
     <li><a href="mobile.html">Mobile</a></li> 
     </ul> 
     <ul class="side-nav" id="mobile-demo"> 
     <li><a href="sass.html">Sass</a></li> 
     <li><a href="badges.html">Components</a></li> 
     <li><a href="collapsible.html">Javascript</a></li> 
     <li><a href="mobile.html">Mobile</a></li> 
    </ul> 
    </div>

app.component.htmlコードです

<navbar></navbar>

のindex.htmlコードが

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Blood</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
     <link rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="bower_components/jquery/dist/jquery.min.js"></script> 
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"> </script> 
     <script src="bower_components/materialize/dist/js/materialize.min.js"></script> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <script src="systemjs.config.js"></script> 
     <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
     </script> 
</head> 
<body> 
     <my-app>Loading AppComponent content here ...</my-app> 
</body> 
</html>

です

出典

2017-02-01 Karthik S Kumar

'$（"。button-collapse "）。sideNav（）;'をライフサイクルフック 'ngAfterViewInit'に追加してみてください。 – echonax

それは働いた！ありがとうございます@echonax –

喜んで私は助けることができました:-) – echonax