2016-04-29 32 views
5

Sto utilizzando angular2 per creare un'app Web che utilizza HashLocationStrategy. tutto va bene fino a quando non provo ad aggiungere i componenti basati su jQuery materializecss ai miei modelli.integrazione angular2 e materializecss

per esempio qui è un esempio di pulsante di compressione barra di navigazione

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

angolare lo tratterà come un percorso percorso e verrà passare alla pagina principale

c'è qualche lavoro giostre per questo problema?

+1

Forse è sufficiente rimuovere la href = "#"? –

+0

il pulsante non funziona quando rimuovo href = "#" e non so perché? – aloba

risposta

7

Come hai detto tu stesso: materializecss è basato su jQuery, cioè ha bisogno di jquery per attivare il comportamento dinamico. Nel tuo caso, dovresti aggiungere $(".button-collapse").sideNav(); da qualche parte nel codice $(document).ready(function(){}) della tua pagina.

Dai uno sguardo allo https://www.npmjs.com/package/angular2-materialize. Questa lib aggiunge esattamente questo comportamento dinamico a angular2. Dopo aver importato 'MaterializeDirective' nel componente angular2, si può semplicemente aggiungere al vostro materialize="sideNav" anchor-tag e dovrebbe funzionare:

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