2016-05-18 14 views
6

Sto lavorando a una semplice app Angular 2 e i percorsi attualmente disponibili sono/login,/register,/home e/profile.Modifica contenuto intestazione e piè di pagina in Modifica percorso in Angular 2

Sul componente dell'app principale, ho una sezione <header>, una sezione <content> e una sezione <footer>. Al momento dispongo dello <router-outlet></router-outlet> nella sezione content, ma vorrei anche (talvolta) modificare alcuni contenuti nei componenti header e footer quando c'è un diverso contenuto nella sezione content.

Ho ricercato il routing figlio (e ho intenzione di utilizzare per alcuni percorsi nella sezione dei contenuti), ma non sono sicuro che sia l'approccio migliore, o addirittura possibile. Le ricerche del bambino di routing che ho fatto è da Angular 2 Corso di John Papa, e qui sta il suo esempio plunker: http://a2-first-look.azurewebsites.net/examples/router-child/plnkr.demo.html?bust=1463590738850

Ho anche esplorato la sottoscrizione ai cambiamenti del router nei componenti Intestazione e piè di pagina, e rendere diverso HTML usando *ngIf. Questo approccio sembra creare un intero nuovo servizio SO 1, ma questo sembra un po 'più diretto SO 2. Sto pensando che posso solo fare qualcosa con la direttiva nativa del router?

Qualsiasi aiuto o un punto nella giusta direzione sarebbe molto apprezzato! Grazie

risposta

1

Si potrebbe mettere questo nel tuo blocco funzionare:

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) { 
    SomeService.header.dynamicText = 'Hello, World' 
    SomeService.footer.dynamicText = 'Contact Us' 
}) 

Naturalmente, si dovrà passare alla funzione SomeService corsa, pure.

Ulteriori informazioni su questo comodo piccolo servizio here

Problemi correlati