Tengo una salida de enrutador en mi app.html. El problema es que tengo 3 componentes (publicación, administración, agregar publicaciones) excepto app.component. En mi componente de publicaciones tengo un menú desplegable una vez que hago clic en el menú desplegable Quiero cargar publicaciones adicionales y la URL debería lucir como esta publicación/addposts. Alguna idea de cómo se hace esto
esta es mi app.routes.ts
const routes: Routes = [ { path: '', redirectTo: 'main', pathMatch: 'full'}, { path: 'main', component:AdminBodyComponent }, { path: 'admin', component:AdminComponent }, { path: 'posts',component:PostsComponent}, { path: 'addposts',component:AddPostComponent}];Opción 1:
Si puede agregar una etiqueta de anclaje, será más simple.
<a routerLink="/addposts" routerLinkActive="active">Add Post</a>Opcion 2:
Sigue estos 3 sencillos pasos.
Paso 1: Importe el enrutador angular
import { Router } from '@angular/router';Paso 2: Inyecte el valor usando la inyección de dependencia
constructor( private router:Router, ... )Paso 3: Invoque el método de navegación () dentro de su evento de clic
this.router.navigate(['/addposts']);
Supongo que desea navegar a una página diferente porque desea enrutar a post/addposts . Entonces puedes cambiar tu camino a este
{ path: 'post/addposts',component:AddPostComponent}];Podría estar equivocado y es posible que desee utilizar múltiples salidas de enrutador en su lugar.
primero instale el enrutador a través de: npm install enrutador
import { Routes, RouterModule } from '@angular/router'; export const router: Routes = [ { path: '', redirectTo: 'main', pathMatch: 'full'}, { path: 'main', component:AdminBodyComponent }, { path: 'admin', component:AdminComponent }, { path: 'posts',component:PostsComponent}, { path: 'addposts',component:AddPostComponent}]; export const routes: ModuleWithProviders = RouterModule.forRoot(router); step2: inject into your .ts file constructor( private router:Router, ... ) step3: this.router.navigate(['/addposts']); step4: <base href="/">si desea utilizar un enrutador específico, siga este paso 4: