5

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?

1 respuesta 1

4

Tienes un error aqui:

    //En esta parte
    path:'cursos:/nombre',
    component:CursosComponent
  },

Tiene que ser path: 'cursos/:nombre'

De otra manera tu route para que haga match deberia ser http://tuApp.com/cursos:/nombre literalmente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.