I have the following problem,
in my route component I have the following code
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { CrearproyectoComponent } from './crearproyecto/crearproyecto.component';
import { ModifproyectoComponent } from './modifproyecto/modifproyecto.component';
import { GestionproyectoComponent } from './gestionproyecto/gestionproyecto.component';
import { CrearcdpComponent } from './crearcdp/crearcdp.component';
import { ModificarcdpComponent } from './modificarcdp/modificarcdp.component';
import { CopiarcdpComponent } from './copiarcdp/copiarcdp.component';
import { EstadocdpComponent } from './estadocdp/estadocdp.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: LoginComponent },
{ path: 'Gestionar2', component: SidebarComponent, children:[
{ path: 'hijo0', component: GestionproyectoComponent, outlet: 'cero' },
]
},
{ path: 'Crear', component: SidebarComponent, children:[
{ path: 'hijo', component: CrearproyectoComponent, outlet: 'uno' },
]},
{ path: 'Modificar', component: SidebarComponent, children:[
{ path: 'hijo2', component: ModifproyectoComponent, outlet: 'dos' },
] },
{ path: 'Crearcdp', component: SidebarComponent, children:[
{ path: 'hijo3', component: CrearcdpComponent, outlet: 'tres' },
] },
{ path: 'Modificarcdp', component: SidebarComponent, children:[
{ path: 'hijo4', component: ModificarcdpComponent, outlet: 'cuatro' },
] },
{ path: 'Copiarcdp', component: SidebarComponent, children:[
{ path: 'hijo5', component: CopiarcdpComponent, outlet: 'cinco' },
] },
{ path: 'Estadocdp', component: SidebarComponent, children:[
{ path: 'hijo6', component: EstadocdpComponent, outlet: 'seis' },
] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
And I call each of these routes in the following way
<ul class="list-unstyled components ">
<p><a [routerLink]="['/Gestionar2', {outlets: {'cero': ['hijo0']}} ]">Gestion de Proyecto</a></p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" >Herramientas</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a [routerLink]="['/Crear', {outlets: {'uno': ['hijo']}} ]">Crear</a>
</li>
<li>
<a [routerLink]="['/Modificar', {outlets: {'dos': ['hijo2']}} ]" >Modificar</a>
</li>
<li>
<a href="#" >Eliminar</a>
</li>
</ul>
</ul>
</nav>
<!-- ACA TERMINA EL SIDEBAR -->
<div id="content">
<!-- ACA COMIENZA EL NAVBAR -->
<!-- ACA TERMINA EL NAVBAR-->
<!-- ACA COMIENZA CONTENIDO -->
<div >
<router-outlet name="cero"></router-outlet>
<router-outlet name="uno"></router-outlet>
<router-outlet name="dos"></router-outlet>
<router-outlet name="tres"></router-outlet>
<router-outlet name="cuatro"></router-outlet>
<router-outlet name="cinco"></router-outlet>
<router-outlet name="seis"></router-outlet>
</div>
<!-- ACA TERMINA EL CONTENIDO-->
</div>
This code generates me routes such as
The problem occurs when I put it together with my back, since I can not assign parentheses to my node routes, they simply give me errors and I do not know how to change that ... There is some command that allows me to remove the parentheses or change what the angular places on the route?