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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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