Buenas tardes Estimados,
Tengo problema con capturar un parámetro mediante la URL de la siguiente manera Versión de Angular 10.
Soy nuevo con angular y estoy siguiendo un curso, pero cuando realizo la aplicación como explican creando el app.routing.ts
, me da error con algunos componentes me imagino que es por la versión, pero al hacerlo de esta forma si compila hasta pasar el parámetro por URL da un error
App.module.ts
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { VideojuegoComponent } from './videojuego/videojuego.component';
import { RolesVideoJuegoComponent } from './rolesVideoJuego/rolesvideojuego.component';
import { CursosComponent } from './cursos/cursos.component';
import { ZapatillasComponent } from './zapatillas/zapatillas.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './components/profile/profile.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
const Rutas:Routes=[
{
path:'',
pathMatch:'full',
redirectTo:'app-home'
},
{
path:'app-home',
component:HomeComponent
},
{
path:'profile/',
component:ProfileComponent
},
{
path:'profile/:nombreC/',
component:ProfileComponent
},
{
path:'dashboard',
component:DashboardComponent
},
{
path:'zapatillas',
component:ZapatillasComponent
},
{
path:'videojuego',
component:VideojuegoComponent
},
{
path:'rolesvideojuego',
component:RolesVideoJuegoComponent
/*, CUANDO QUIERA ANIDAR O TENER UN LINK HIJO DENTRO DE UNO PADRE
children:[
{
path:'',
pathMatch:'prefix',
redirectTo:'RolesVideoJuegoComponent (HIJO)'
}
{
path:RolesVideoJuegoComponent (HIJO),
component:RolesVideoJuegoComponent (HIJO),
}
]*/
},
{
path:'cursos',
component:CursosComponent
},
{
path:'cursos:/nombre',
component:CursosComponent
},
{
path: '404',
component:HomeComponent}
];
@NgModule({
declarations: [
AppComponent,
VideojuegoComponent,
RolesVideoJuegoComponent,
CursosComponent,
ZapatillasComponent,
HomeComponent,
ProfileComponent,
DashboardComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(Rutas, {
enableTracing:true
})
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
cursosComponent.ts
import { Router, ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'app-cursos',
templateUrl: './cursos.component.html',
styleUrls: ['./cursos.component.css']
})
export class CursosComponent implements OnInit {
public nombreC:string;
constructor(
private _route:ActivatedRoute,
private _router:Router
) { }
ngOnInit() {
this._route.params.subscribe((params:Params) =>{
this.nombreC = params.nombreC;
//this.nombre = params['nombre'];
console.log(this.nombreC);
});
}```
cursos.component.html
<br>
<h1> MODULO DE CURSO </h1>
<h3 *ngIf="nombreC">Bienvenido al curso de {{nombre}} </h3>
----------
<br>
Me da este error:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'cursos/andres' Error: Cannot match any routes. URL Segment: 'cursos/andres'
El parámetro que se esta pasando por la URL
es "andres"
¿Alguien puede indicarme cual es el error en mi código?