Angular
routing

Rutning med barn

Jag tyckte att det här var sättet att ordentligt bo bo rutter i app.routing.ts eller app.module.ts-filen (beroende på vad du föredrar). Den här metoden fungerar när du använder antingen WebPack eller SystemJS.

Exemplet nedan visar rutter för hem, hem / räknare och hem / räknare / hämta data. De första och sista vägarna är exempel på omdirigeringar. Slutligen i slutet av exemplet är ett korrekt sätt att exportera den väg som ska importeras i en separat fil. För ex. app.module.ts

För att ytterligare förklara, kräver Angular att du har en ruttlös rutt i barnfältet som inkluderar överordnad komponent, för att representera överordnad rutt. Det är lite förvirrande, men om du tänker på en tom URL-adress för en barnväg, skulle den i princip motsvara samma URL som överordnad rutt.

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

Bra exempel och beskrivning via Siraj

Grundläggande dirigering

Routern möjliggör navigering från en vy till en annan baserad på användarinteraktioner med applikationen.

Följande är stegen för att implementera grundläggande routing i Angular -

OBS : Se till att du har den här taggen:

<base href='/'> 

som det första barnet under ditt huvudtagg i din index.html-fil. Det här elementet anger att din appmapp är programroten. Angular skulle då veta hur du organiserar dina länkar.

1. Kontrollera om du pekar på rätt / senaste routingberoende i package.json (med den senaste versionen av Angular) och att du redan har npm install en npm install -

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

2. Definiera rutten enligt dess gränssnittsdefinition:

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

3. I en routingsfil ( routes/app.routing.ts ), importera alla komponenter som du behöver konfigurera för olika routingbanor. Tom sökväg innebär att vyn laddas som standard. ":" i sökvägen indikerar dynamisk parameter som skickas till den laddade komponenten.

   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. I dina app.module.ts , placera detta under @NgModule([]) under imports :

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

5. Ladda / visa routerkomponenterna baserat på åtkomst till sökväg. Direktivet <router-outlet> används för att säga vinklat var komponenten ska laddas.

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

6. Länk de andra rutterna. Som standard kommer RouterOutlet att ladda den komponent för vilken den tomma sökvägen anges i Routes . RouterLink direktivet används med html-ankaretikett för att ladda komponenterna som är kopplade till rutter. RouterLink genererar href-attributet som används för att generera länkar. Till exempel:

   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 är vi bra med dirigering till statiska vägar. RouterLink stöder också dynamisk sökväg genom att skicka extra parametrar tillsammans med sökvägen.

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 tar en matris där den första parametern är vägen för routing och efterföljande element är för de dynamiska routingparametrarna.