Angular
Routing

Routing mit Kindern

Ich habe festgestellt, dass dies der richtige Weg ist, um untergeordnete Routen in der Datei app.routing.ts oder app.module.ts (abhängig von Ihren Vorlieben) richtig zu verschachteln. Dieser Ansatz funktioniert bei Verwendung von WebPack oder SystemJS.

Das folgende Beispiel zeigt Routen für Home, Home / Counter und Home / Counter / Fetch-Daten. Die erste und letzte Route sind Beispiele für Weiterleitungen. Am Ende des Beispiels können Sie die zu importierende Route in einer separaten Datei exportieren. Für ex. app.module.ts

Angular erfordert, dass Sie über eine Pfadlose Route im untergeordneten Array verfügen, die die übergeordnete Komponente enthält, um die übergeordnete Route darzustellen. Dies ist ein wenig verwirrend, aber wenn Sie über eine leere URL für eine untergeordnete Route nachdenken, entspricht sie im Wesentlichen der gleichen URL wie die übergeordnete 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 { }

Tolles Beispiel und Beschreibung über Siraj

Grundlegendes Routing

Der Router ermöglicht die Navigation von einer Ansicht zur anderen basierend auf den Benutzerinteraktionen mit der Anwendung.

Im Folgenden werden die Schritte zur Implementierung des grundlegenden Routings in Angular beschrieben:

HINWEIS : Stellen Sie sicher, dass Sie dieses Tag haben:

<base href='/'> 

als erstes Kind unter Ihrem Head-Tag in Ihrer index.html-Datei. Dieses Element gibt an, dass Ihr App-Ordner der Anwendungsstamm ist. Angular würde dann wissen, wie Sie Ihre Links organisieren.

1. Prüfen Sie, ob Sie in package.json (unter Verwendung der neuesten Version von Angular) auf die richtigen / neuesten Routing-Abhängigkeiten verweisen und bereits eine npm install

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

2. Definieren Sie die Route gemäß ihrer Schnittstellendefinition:

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

3. Importieren Sie in einer Routing-Datei ( routes/app.routing.ts ) alle Komponenten, die Sie für verschiedene Routingpfade konfigurieren müssen. Ein leerer Pfad bedeutet, dass die Ansicht standardmäßig geladen wird. ":" im Pfad gibt dynamische Parameter an, die an die geladene Komponente übergeben werden.

   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. Platzieren Sie dies in Ihrer app.module.ts unter @NgModule([]) unter imports :

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

5. Laden / Anzeigen der Routerkomponenten basierend auf dem Pfad, auf den zugegriffen wird. Die Direktive <router-outlet> gibt an, wohin die Komponente geladen werden soll.

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

6. Verbinden Sie die anderen Routen. Standardmäßig RouterOutlet die Komponente, für die in den Routes leerer Pfad angegeben ist. RouterLink Anweisung wird mit dem HTML- RouterLink verwendet, um die an Routen angeschlossenen Komponenten zu laden. RouterLink generiert das href-Attribut, das zum Generieren von Links verwendet wird. Zum Beispiel:

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

Nun können wir gut auf statische Pfade routen. RouterLink unterstützt auch den dynamischen Pfad, indem zusätzliche Parameter zusammen mit dem Pfad übergeben werden.

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 ein Array, in dem der erste Parameter der Pfad für das Routing und die nachfolgenden Elemente die dynamischen Routing-Parameter sind.