Angular
routing

Routing met kinderen

Ik vond dit de manier om kinderroutes op de juiste manier in het bestand app.routing.ts of app.module.ts te nestelen (afhankelijk van je voorkeur). Deze aanpak werkt bij het gebruik van WebPack of SystemJS.

Het onderstaande voorbeeld toont routes voor thuis, thuis / teller en thuis / teller / ophaalgegevens. De eerste en laatste routes zijn voorbeelden van omleidingen. Eindelijk aan het einde van het voorbeeld is een goede manier om de te importeren route in een afzonderlijk bestand te exporteren. Voor ex. app.module.ts

Om verder uit te leggen, vereist Angular dat u een pad zonder pad in de onderliggende array hebt dat de bovenliggende component bevat, om de bovenliggende route weer te geven. Het is een beetje verwarrend, maar als je denkt aan een lege URL voor een onderliggende route, zou deze in wezen dezelfde URL zijn als de bovenliggende route.

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 { }

Geweldig voorbeeld en beschrijving via Siraj

Basisroutering

Router maakt navigatie mogelijk van de ene weergave naar de andere op basis van gebruikersinteracties met de applicatie.

Hier volgen de stappen voor het implementeren van basisroutering in Angular -

OPMERKING : zorg ervoor dat je deze tag hebt:

<base href='/'> 

als het eerste kind onder je hoofd-tag in je index.html-bestand. Dit element geeft aan dat uw app-map de hoofdmap van de toepassing is. Angular zou dan weten hoe uw links te organiseren.

1. Controleer of u verwijst naar de juiste / laatste routeafhankelijkheden in package.json (met de nieuwste versie van Angular) en of u al een npm install -

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

2. Definieer de route volgens de interfacedefinitie:

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

3. routes/app.routing.ts in een routeringsbestand ( routes/app.routing.ts ) alle componenten die u moet configureren voor verschillende routeringspaden. Leeg pad betekent dat de weergave standaard wordt geladen. ":" in het pad geeft dynamische parameter aan die wordt doorgegeven aan de geladen component.

   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. Plaats dit in uw app.module.ts onder @NgModule([]) onder imports :

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

5. Laad / toon de routercomponenten op basis van toegangspad. De <router-outlet> -richtlijn wordt gebruikt om hoekig te vertellen waar de component moet worden geladen.

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

6. Koppel de andere routes. Standaard RouterOutlet het onderdeel waarvoor een leeg pad is opgegeven in de Routes . RouterLink instructie wordt gebruikt met HTML- RouterLink om de componenten te laden die aan routes zijn gekoppeld. RouterLink genereert het href-kenmerk dat wordt gebruikt om links te genereren. Bijvoorbeeld:

   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 { }
   

Nu zijn we goed in het routeren naar statische paden. RouterLink ondersteunt ook het dynamische pad door extra parameters samen met het pad door te geven.

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 een array waarbij de eerste parameter het pad voor routering is en de daaropvolgende elementen voor de dynamische routeringsparameters.