Angular
Wytyczanie

Trasa z dziećmi

Odkryłem, że jest to sposób na prawidłowe zagnieżdżenie tras potomnych w pliku app.routing.ts lub app.module.ts (w zależności od twoich preferencji). To podejście działa w przypadku korzystania z pakietu WebPack lub SystemJS.

Poniższy przykład pokazuje trasy dla domu, domu / licznika oraz domu / licznika / pobierania danych. Pierwsza i ostatnia trasa to przykłady przekierowań. Wreszcie na końcu przykładu znajduje się właściwy sposób na wyeksportowanie trasy do zaimportowania w osobnym pliku. Np. app.module.ts

W celu dalszego wyjaśnienia, Angular wymaga posiadania ścieżki bez ścieżki w tablicy potomnej, która zawiera komponent nadrzędny, do reprezentowania trasy nadrzędnej. Jest to trochę mylące, ale jeśli pomyślisz o pustym adresie URL dla trasy podrzędnej, zasadniczo byłby to ten sam adres URL, co trasa nadrzędna.

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

Świetny przykład i opis za pośrednictwem Siraj

Podstawowy routing

Router umożliwia nawigację między widokami na podstawie interakcji użytkownika z aplikacją.

Poniżej przedstawiono kroki wdrażania podstawowego routingu w Angular -

UWAGA : Upewnij się, że masz ten tag:

<base href='/'> 

jako pierwsze dziecko pod tagiem head w pliku index.html. Ten element informuje, że folder aplikacji jest katalogiem głównym aplikacji. Angular wiedziałby wtedy, jak uporządkować linki.

1. Sprawdź, czy wskazujesz poprawne / najnowsze zależności routingu w pakiecie.json (przy użyciu najnowszej wersji Angular) i czy już wykonałeś npm install -

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

2. Zdefiniuj trasę zgodnie z definicją interfejsu:

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

3. W pliku routingu ( routes/app.routing.ts ) zaimportuj wszystkie komponenty, które musisz skonfigurować dla różnych ścieżek routingu. Pusta ścieżka oznacza, że widok jest ładowany domyślnie. „:” w ścieżce wskazuje parametr dynamiczny przekazany do załadowanego komponentu.

   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. W app.module.ts umieść to w @NgModule([]) obszarze imports :

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

5. Załaduj / wyświetl komponenty routera na podstawie dostępnej ścieżki. Dyrektywa <router-outlet> służy do określenia kątowego miejsca załadowania komponentu.

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

6. Połącz inne trasy. Domyślnie RouterOutlet załaduje składnik, dla których pusty ścieżka jest określona w Routes . Dyrektywa RouterLink jest używana z tagiem kotwicy html do ładowania komponentów dołączonych do tras. RouterLink generuje atrybut href, który służy do generowania łączy. Na przykład:

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

Teraz jesteśmy dobrzy w routingu do ścieżek statycznych. RouterLink obsługuje również ścieżkę dynamiczną, przekazując dodatkowe parametry wraz ze ścieżką.

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 przyjmuje tablicę, w której pierwszym parametrem jest ścieżka do routingu, a kolejne elementy do parametrów routingu dynamicznego.