Невозможно прочитать параметр и снова возникла проблема при загрузке компонента при изменении параметра в маршруте. - PullRequest
Новая
       32

Невозможно прочитать параметр и снова возникла проблема при загрузке компонента при изменении параметра в маршруте.

0 голосов
/ 14 января 2019

Я работаю над угловым проектом, где у меня проблема с маршрутизацией.

  1. Я не могу прочитать параметр после его прохождения через маршрут при выборе каких-либо параметров в навигационной панели.

  2. Я не могу перезагрузить компонент после изменения параметра маршрута

Мой код навигационной панели указан ниже

ФАЙЛ ТС 

export class HeaderComponent implements OnInit {
  navLinks:any;
  token: any;
  responsesportstypedata: any;
  store = [];
  matchname: any;

  constructor(  private rest : ServicesService , public router : Router ) {
    console.log(location.pathname);

    this.loadDataFromApi();
  }

  ngOnInit() {}

  getMatchid(val){
 this.router.navigate(['matchcenter',val]);
    }
     loadDataFromApi() {
     this.token =  localStorage.getItem('putoken');
      console.log('token == ' + this.token);
     this.rest.getSportstype().then(
      result => {
       this.responsesportstypedata = result;
       this.store = this.responsesportstypedata;


       },
    }

HTML 

<div (click)='getMatchid(item.ttypeUid)'>{{item.ttypeName})</div>

приложение-routing.module.ts 

const routes: Routes = [

 { path: 'matchcenter' , component: MatchcenterComponent},
 { path: 'matchcenter/:matchname' , component: MatchcenterComponent}

];

На пути http://localhost:4200/matchcenter/:matchname, я прохожу matchname динамически,

это может быть http://localhost:4200/matchcenter/Football или же http://localhost:4200/matchcenter/Cricket

один раз компонент MatchcenterComponent загружен, но по параметру компонента изменения маршрута MatchcenterComponent не перезагружается

Следующий код предназначен для MatchcenterComponent. 

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import { ServicesService } from '../service/services.service';

@Component({
  selector: 'app-matchcenter',
  templateUrl: './matchcenter.component.html',
  styleUrls: ['./matchcenter.component.scss']
})
export class MatchcenterComponent implements OnInit {

  constructor(public rest : ServicesService , public router : Router , public dialog: MatDialog , public _route: ActivatedRoute ) {
    console.log('matchcenterPage');
    console.log(location.pathname);
    this.loadDataFromApi();
   }   
  ngOnInit() {

     const id = +this._route.snapshot.paramMap.get('matchname');
    this.router.navigate(['/matchcenter',matchName]);
    console.log('+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++' + matchName);
      //  this.router.navigate(['matchcenter/Cricket']);
  }
}

ПРИМЕЧАНИЕ: другие мои маршруты работают нормально, поэтому работает

1 Ответ

0 голосов
/ 14 января 2019

Прежде всего, убедитесь, что в вашем html-файле есть <router-outlet></router-outlet>.

Во-вторых, в ngOnInit() из MatchCenterComponent вы конвертируете параметр 'matchname' в целое число, но, поскольку это будет футбол или крикет, это приведет к NaN.

В-третьих, как и в ngOnInit(), вы переходите к ['/matchcenter',matchName], но это вернет MatchCenterComponent, так что вы будете в бесконечном цикле.

...