Angular7 - 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.

Durante la configurazione del progetto, abbiamo già incluso il modulo di routing e lo stesso è disponibile in app.module.ts come mostrato di seguito -

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule viene aggiunto come mostrato sopra e incluso nell'array delle importazioni.

Dettagli del file di app-routing.module sono riportati di seguito -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Qui, dobbiamo notare che questo file viene generato per impostazione predefinita quando il routing viene aggiunto durante la configurazione del progetto. Se non vengono aggiunti, i file di cui sopra devono essere aggiunti manualmente.

Quindi, nel file sopra, abbiamo importato Route e RouterModule da @ angular / router.

C'è una const routesdefinito che è di tipo Percorsi. È un array che contiene tutti i percorsi di cui abbiamo bisogno nel nostro progetto.

Le route const vengono fornite al RouterModule come mostrato in @NgModule. Per mostrare i dettagli di instradamento all'utente, dobbiamo aggiungere la direttiva <router-outlet> dove vogliamo che venga visualizzata la vista.

Lo stesso viene aggiunto in app.component.html come mostrato di seguito

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

Ora creiamo 2 componenti chiamati come Home e Contact Us e navigare tra di loro utilizzando il routing.

Component Home

Innanzitutto, discuteremo di Home. Di seguito è riportata la sintassi per Component Home:

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Componente Contattaci

Di seguito è riportata la sintassi per Componente Contattaci -

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Abbiamo finito con la creazione di componenti a casa e contattaci. Di seguito sono riportati i dettagli dei componenti in app.module.ts -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Ora aggiungiamo i dettagli delle rotte in app-routing.module.ts come mostrato di seguito -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

L'array delle rotte ha i dettagli del componente con percorso e componente. Il componente richiesto viene importato come mostrato sopra.

Qui, dobbiamo notare che i componenti di cui abbiamo bisogno per il routing vengono importati in app.module.ts e anche in app-routing.module.ts. Importiamoli in un unico posto, cioè in app-routing.module.ts.

Quindi creeremo un array di componenti da utilizzare per il routing ed esporteremo l'array in app-routing.module.ts e lo importeremo nuovamente in app.module.ts. Quindi abbiamo tutti i componenti da utilizzare per il routing in app-routing.module.ts.

Ecco come l'abbiamo fatto app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

L'array di componenti, ovvero RoutingComponent, viene importato in app.module.ts come segue:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
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, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Quindi ora abbiamo finito con la definizione delle rotte. Dobbiamo mostrare lo stesso all'utente, quindi aggiungiamo due pulsanti, Home e Contattaci in app.component.html e al clic dei rispettivi pulsanti, verrà visualizzata la vista componenti all'interno della direttiva <router-outlet> che abbiamo hanno aggiunto add.component.html.

Crea pulsante all'interno di app.component.html e dai il percorso ai percorsi creati.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

In .html, abbiamo aggiunto link di ancoraggio, Home e Contattaci e utilizzato routerLink per fornire il percorso alle rotte che abbiamo creato in app-routing.module.ts.

Proviamo ora lo stesso nel browser:

Ecco come lo otteniamo nel browser. Aggiungiamo un po 'di stile per rendere i collegamenti belli.

Abbiamo aggiunto il seguente css in app.component.css -

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

Questa è la visualizzazione dei collegamenti nel browser -

Fare clic sul collegamento Home, per vedere i dettagli dei componenti della casa come mostrato di seguito -

Fare clic su Contattaci, per vedere i dettagli dei suoi componenti come indicato di seguito -

Quando fai clic sul collegamento, vedrai anche l'URL della pagina nella barra degli indirizzi che cambia. Aggiunge i dettagli del percorso alla fine della pagina come si vede nello screenshot mostrato sopra.

↰ Previous page Next page ↱

Angular7 - Routing

Component Home

Componente Contattaci

Tutorial Angular7