Angular
Enrutamiento

Enrutamiento con niños.

Descubrí que esta es la forma de anidar correctamente las rutas de los niños dentro del archivo app.routing.ts o app.module.ts (según sus preferencias). Este enfoque funciona cuando se usa WebPack o SystemJS.

El siguiente ejemplo muestra las rutas de inicio, inicio / contador y inicio / contador / obtener datos. Las primeras y últimas rutas son ejemplos de redirecciones. Finalmente, al final del ejemplo es una forma adecuada de exportar la Ruta a importar en un archivo separado. Por ej. app.module.ts

Para explicar con más detalle, Angular requiere que tenga una ruta sin ruta en la matriz secundaria que incluye el componente principal, para representar la ruta principal. Es un poco confuso, pero si piensa en una URL en blanco para una ruta secundaria, esencialmente sería igual a la misma URL que la ruta principal.

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

Gran ejemplo y descripción a través de Siraj

Enrutamiento básico

El enrutador permite la navegación de una vista a otra según las interacciones del usuario con la aplicación.

Los siguientes son los pasos para implementar el enrutamiento básico en Angular:

NOTA : Asegúrate de tener esta etiqueta:

<base href='/'> 

como el primer hijo debajo de su etiqueta de cabecera en su archivo index.html. Este elemento indica que su carpeta de aplicaciones es la raíz de la aplicación. Angular entonces sabría cómo organizar tus enlaces.

1. Compruebe si está apuntando a las dependencias de enrutamiento correctas / más recientes en package.json (usando la última versión de Angular) y si ya realizó una npm install :

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

2. Defina la ruta según su definición de interfaz:

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

3. En un archivo de enrutamiento ( routes/app.routing.ts ), importe todos los componentes que necesita configurar para diferentes rutas de enrutamiento. La ruta vacía significa que la vista se carga de forma predeterminada. ":" en la ruta indica un parámetro dinámico pasado al componente cargado.

   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. En su app.module.ts , coloque esto bajo @NgModule([]) bajo imports :

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

5. Cargue / visualice los componentes del enrutador según la ruta a la que haya accedido. La directiva <router-outlet> se utiliza para indicar a angular dónde cargar el componente.

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

6. Enlace las otras rutas. De forma predeterminada, RouterOutlet cargará el componente para el cual se especifica una ruta vacía en las Routes . RouterLink directiva RouterLink se usa con la etiqueta de anclaje html para cargar los componentes adjuntos a las rutas. RouterLink genera el atributo href que se utiliza para generar enlaces. Por ejemplo:

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

Ahora, estamos bien con el enrutamiento a rutas estáticas. RouterLink admite la ruta dinámica al pasar parámetros adicionales junto con la ruta.

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 toma una matriz donde el primer parámetro es la ruta de enrutamiento y los elementos subsiguientes son para los parámetros de enrutamiento dinámico.