Angular 4 - Routing

Routing significa fondamentalmente navigare tra le pagine. Hai visto molti siti con link che ti indirizzano a una nuova pagina. Ciò può essere ottenuto utilizzando il routing. Qui le pagine a cui ci riferiamo saranno sotto forma di componenti. Abbiamo già visto come creare un componente. Creiamo ora un componente e vediamo come utilizzarlo con il routing.

Nel componente genitore principale app.module.ts, ora dobbiamo includere il modulo router come mostrato di seguito -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

importa {RouterModule} da "@ angular / router"

Qui, il RouterModule viene importato da angular / router. Il modulo è incluso nelle importazioni come mostrato di seguito:

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule si riferisce al file forRootche accetta un input come un array, che a sua volta ha l'oggetto del percorso e del componente. Path è il nome del router e component è il nome della classe, cioè il componente creato.

Vediamo ora il file creato dal componente -

New-cmp.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

La classe evidenziata è menzionata nelle importazioni del modulo principale.

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Ora, abbiamo bisogno che il contenuto di cui sopra dal file html venga visualizzato ogni volta che richiesto o cliccato dal modulo principale. Per questo, dobbiamo aggiungere i dettagli del router nel fileapp.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

Nel codice sopra, abbiamo creato il tag anchor link e assegnato routerLink come “new-cmp”. Questo è indicatoapp.module.ts come il sentiero.

Quando un utente fa clic new component, la pagina dovrebbe visualizzare il contenuto. Per questo, abbiamo bisogno del seguente tag:<router-outlet> </router-outlet>.

Il tag precedente garantisce che il contenuto nel file new-cmp.component.html verrà visualizzato sulla pagina quando un utente fa clic new component.

Vediamo ora come viene visualizzato l'output sul browser.

Quando un utente fa clic su Nuovo componente, vedrai quanto segue nel browser.

L'URL contiene http://localhost:4200/new-cmp. Qui, il new-cmp viene aggiunto all'URL originale, che è il percorso fornito nel fileapp.module.ts e il collegamento al router in app.component.html.

Quando un utente fa clic su Nuovo componente, la pagina non viene aggiornata e il contenuto viene mostrato all'utente senza dover ricaricare. Solo una parte particolare del codice del sito verrà ricaricata quando si fa clic. Questa funzione aiuta quando abbiamo contenuti pesanti sulla pagina e deve essere caricata in base all'interazione dell'utente. La funzione offre anche una buona esperienza utente poiché la pagina non viene ricaricata.