Estoy creando un proyecto inicial para mí. Lo que debo hacer es crear un componente en el que llame a la barra de navegación, la barra lateral, el pie de página y una página que quiero mostrar como enrutador.
Esta es mi aplicación.enrutamiento
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LayoutComponent } from './layout/layout.component'; import { LoginComponent } from './screens/auth/login/login.component'; import { StatsComponent } from './screens/stats/stats.component'; const appRoutes: Routes = [ { path: '', component: LoginComponent }, { path: 'Dashboard', component: LayoutComponent }, { path: 'login', component: LoginComponent }, { path: 'stats', component: StatsComponent } ]; @NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule] }) export class AppRoutingModule { }Tengo una página de inicio de sesión simple mediante la cual voy a la ruta del tablero
<h1>Angular Router App</h1> <nav> <ul> <li><a routerLink="/Dashboard/login" routerLinkActive="active">Login</a></li> </ul> </nav>Este es mi LayoutComponent (Tablero)
<div class="wrapper"> <div class="app-sidebar" data-active-color="white" data-background-color="black" data-image="assets/img/sidebar-bg/01.jpg"> <p>Sidebar</p> <div class="sidebar-background"></div> </div> <!-- <app-navbar></app-navbar> --> <p>NavBar</p> <div class="main-panel"> <div class="main-content"> <div class="content-wrapper"> <div class="container-fluid"> <router-outlet></router-outlet> </div> </div> </div> <!-- <app-footer></app-footer> --> <p>Footer</p> </div> </div> Puede ver que tengo <router-outlet></router-outlet> en esta página. Necesito saber cómo puedo mostrar otro componente en esto. Tengo stats de un componente en el enrutamiento de aplicaciones. ¿Necesito mostrar ese componente dentro de este diseño? ¿Cómo puedo mostrar esto como enrutamiento?
Significa algo como Dashboard/stats
Cuando desee utilizar el enrutamiento en un proyecto, debe crear el proyecto de la siguiente manera:
ng new my-project --routing=true Esto creará un archivo de enrutamiento que necesitará, a saber, app-routing.module.ts
Ahora para crear una ruta:
ng generate module routes/route-1 --routing=trueEsto creará nuevos archivos, en particular:
route-1.module.ts route-1-routing.module.ts
En route-1-routing.module.ts defina rutas así:
const routes: Routes = [ { path: '', component: Route1Component }, { path: 'hello', component: HelloComponent } ] (obviamente, cree estos componentes con algo como ng gc routes/route-1/components/route-1 y ng gc routes/route-1/components/hello ; estos comandos se ejecutan en la línea de comando, al igual que cuando usa ng nuevo comando)
Ahora, de vuelta en app-routing.module.ts, agregue esto:
const routes: Routes = [ { path: 'route-1', loadChildren: () => import('./routes/route-1/route-1.module').then(m => m.Route1Module) } ]ahora puedes visitar:
/route-1 en su navegador y verá Route1Component (donde está <router-outlet></router-outlet> - no olvide agregar router-outlet en app.component.html)
y puedes visitar:
/route-1/hello en su navegador y verá HelloComponent (nuevamente donde está router-outlet )
Finalmente, puede crear enlaces a su ruta usando
<a routerLink="/route-1">route-1</a> <a routerLink="/route-1/hello">route-1/hello</a>Repita este proceso para agregar más rutas.
Mucho amor en El :D