0

Buen día, estimados, les presento el error que tengo a ver si alguno de ustedes me puede colaborar:

Error: Cannot match any routes. URL Segment: 'home/character-details/2'
    at ApplyRedirects.noMatchError (router.mjs:2934)
    at router.mjs:2916
    at catchError.js:10
    at OperatorSubscriber._error (OperatorSubscriber.js:19)
    at OperatorSubscriber.error (Subscriber.js:40)
    at OperatorSubscriber._error (Subscriber.js:64)
    at OperatorSubscriber.error (Subscriber.js:40)
    at OperatorSubscriber._error (Subscriber.js:64)
    at OperatorSubscriber.error (Subscriber.js:40)
    at OperatorSubscriber._error (Subscriber.js:64)
    at resolvePromise (zone.js:1213)
    at resolvePromise (zone.js:1167)
    at zone.js:1279
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.mjs:25840)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)
    at ZoneTask.invokeTask [as invoke] (zone.js:491)
    at invokeTask (zone.js:1600)

Este sucede al querer darle click a una imagen proveniente de una API, les enseño mi componente:

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Character } from '@app/shared/interfaces/character.interfaces';

@Component({
  selector: 'app-character',
  template: ` <div class="card">
    <div class="image">
      <a [routerLink] = "['character-details', character.id]">
        <img
          [src]="character.image"
          [alt]="character.name"
          class="card-img-top"
        />
      </a>
    </div>
    <div class="card-inner">
      <div class="header">
        <a [routerLink]="['../character-details', character.id]">
          <h2>{{ character.name | slice: 0:15 }}</h2>
        </a>
        <h4 class="text-muted">{{ character.gender }}</h4>
        <small class="text-muted">{{ character.created | date }}</small>
      </div>
    </div>
  </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CharacterComponent {
  @Input()
  character!: Character;
}

Necesito que me redireccione a un id específico por cada tarjet, es por esto que lo hago con los corchetes cuadrados, ya intenté con la sintaxis sin estos y tampoco funciona, creo que el problema viene del routing.module.ts pero no sé en que parte, Les agradecería la ayuda, un saludo

2
  • quita el ../ al inicio de la URL el 8 nov. 2021 a las 9:29
  • Agrega como configuraste el router el 8 nov. 2021 a las 14:05

1 respuesta 1

1

URL Segment: 'character/2 depende de como configuraste las rutas

// ts
 routes: Routes = [
   { path: "character", 
    component:CharacterComponent 
    
   },
  { 
    path: "character:id", 
    component:CharacterDetailComponent
  },
];
// html ruta -->/character    --> character.id
<a [routerLink]="['/character',character.id]">

</a>

................
// ts caracter-detail.component.ts
import {ActiveRoute} from '@angular/router'

constructor(private _route:ActiveRoute){
    console.log(this._route.snapshot.paramMap.get('id')
}

...................

1
  • 1
    Toda la razón hermano. Ahí en [routerLink] la ruta sería "['/character-details', character.id]", de resto, tienes razón en todo, muchas gracias el 8 nov. 2021 a las 14:02

Tu Respuesta

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

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