En el proyecto, prefiero una navegación entre páginas, según la opción elegida, frente a mostrar los componentes creados en una misma página app-component.html.
Para ello, los pasos a seguir van a ser:
- En el fichero app.module.ts, añadimos esta línea: «import { RouterModule } from ‘@angular/router’;»
- De nuevo en el fichero app.module.ts, en la sección @NgModule, dentro del array de «imports», añadimos:
- imports: [ BrowserModule, RouterModule.forRoot([
- {path: ‘peliculas’, component: PeliculasComponent},
- {path: ‘generos’, component: GenerosComponent},
- {path: ‘directores’, component: DirectoresComponent}
- ]),
- ],
- … con ello asignamos nombres a la carga de determinados componentes de nuestro proyecto. Es decir, añadiendo en nuestra dirección «/peliculas» por ejemplo, conseguiremos sacar por pantalla el componente correspondiente que indicamos. Eso ocurrirá allí donde indiquemos, según el siguiente comando:
- En nuestro componente principal (app-component.html) añadimos el marcador: «<router-outlet></router-outlet>» en lugar de un componente específico. A partir de entonces, si vamos a la dirección «/peliculas», se cargará el componente «peliculas» allí donde tengamos este marcador, y así sucesivamente.