Angular
Routing

Instradare con i bambini

Ho trovato questo modo di annidare correttamente le rotte dei bambini all'interno del file app.routing.ts o app.module.ts (a seconda delle preferenze). Questo approccio funziona quando si utilizza WebPack o SystemJS.

L'esempio seguente mostra i percorsi per casa, casa / contatore e home / contatore / fetch-data. Il primo e l'ultimo instradamento sono esempi di reindirizzamenti. Alla fine dell'esempio, infine, c'è un modo corretto per esportare il percorso da importare in un file separato. Per es. app.module.ts

Per spiegare ulteriormente, Angular richiede di avere un percorso senza percorsi nell'array per bambini che include il componente principale, per rappresentare la rotta principale. È un po 'confuso, ma se si pensa a un URL vuoto per un percorso figlio, equivarrebbe sostanzialmente allo stesso URL del percorso principale.

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

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

Ottimo esempio e descrizione tramite Siraj

Routing di base

Il router abilita la navigazione da una vista all'altra in base alle interazioni dell'utente con l'applicazione.

Di seguito sono riportati i passaggi per implementare il routing di base in Angular -

NOTA : assicurati di avere questo tag:

<base href='/'> 

come il primo figlio sotto il tag head nel file index.html. Questo elemento indica che la cartella dell'app è la root dell'applicazione. Angular saprebbe quindi come organizzare i tuoi collegamenti.

1. Controlla se stai indicando le dipendenze corrette / più recenti di routing in package.json (usando l'ultima versione di Angular) e che hai già fatto un'installazione di npm install -

   "dependencies": {
       "@angular/router": "^4.2.5"
   }
   

2. Definire il percorso come per la sua definizione di interfaccia:

   interface Route {
     path?: string;
     pathMatch?: string;
     component?: Type<any>;
   }
   

3. In un file di routing ( routes/app.routing.ts ), importa tutti i componenti che devi configurare per percorsi di routing diversi. Percorso vuoto significa che la vista è caricata di default. ":" nel percorso indica il parametro dinamico passato al componente caricato.

   import { Routes, RouterModule } from '@angular/router';
   import { ModuleWithProviders } from '@angular/core';
   import { BarDetailComponent } from '../components/bar-detail.component';
   import { DashboardComponent } from '../components/dashboard.component';
   import { LoginComponent } from '../components/login.component';
   import { SignupComponent } from '../components/signup.component';
   
   export const APP_ROUTES: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'dashboard', component: DashboardComponent },
       { path: 'bars/:id', component: BarDetailComponent },
       { path: 'login', component: LoginComponent },
       { path: 'signup',   component: SignupComponent }
   ];
   export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
   

4. Nel tuo app.module.ts , app.module.ts sotto @NgModule([]) sotto le imports :

   // Alternatively, just import 'APP_ROUTES
   import {APP_ROUTING} from '../routes/app.routing.ts';
   @NgModule([
       imports: [
           APP_ROUTING
           // Or RouterModule.forRoot(APP_ROUTES)
       ]
   ])
   

5. Carica / visualizza i componenti del router in base al percorso cui si accede. La direttiva <router-outlet> è usata per dire angolare dove caricare il componente.

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <div>
               <router-outlet></router-outlet>
           </div>
       `
   })
   export class AppComponent {}
   

6. Collega gli altri percorsi. Per impostazione predefinita, RouterOutlet caricherà il componente per il quale è specificato il percorso vuoto nelle Routes . RouterLink direttiva RouterLink viene utilizzata con il tag di ancoraggio html per caricare i componenti collegati alle rotte. RouterLink genera l'attributo href che viene utilizzato per generare collegamenti. Per esempio:

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <a [routerLink]="['/login']">Login</a>
           <a [routerLink]="['/signup']">Signup</a>      
           <a [routerLink]="['/dashboard']">Dashboard</a>
           <div>
               <router-outlet></router-outlet>
           </div>
           `
   })
   export class AnotherComponent { }
   

Ora, siamo bravi con il routing su percorsi statici. RouterLink supporta anche il percorso dinamico passando parametri aggiuntivi insieme al percorso.

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

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SecondComponent { }

RouterLink accetta un array in cui il primo parametro è il percorso per il routing e gli elementi successivi sono per i parametri di routing dinamico.