html - RouterLink fungerer ikke riktig dynamisk i Angular 6

dashboard.html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" routerLink='/dashboard'>Dashboard</a>
  </li>
  <li class="nav-item" *ngFor="let cat of categories; let i = index">
    <a class="nav-link" [routerLink]="cat.categories">
      <i class="fa fa-{{cat.Icon}}" aria-hidden="true"></i>
      &nbsp;{{cat.categories}}
    </a>
  </li>
</ul>

Jeg genererer en dynamisk liste, det er akkurat som

<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>

og min nåværende rute er "http://localhost:4200/dashboard". Nå vil jeg rute når jeg klikker på

<a class="nav-link" [routerLink]="cat.categories">
  <i class="fa fa-{{cat.Icon}}" aria-hidden="true"></i>&nbsp; 
  {{cat.categories}}
</a>

ønsket rute er "http://localhost:4200/dashboard/page1". Det fungerer fint når jeg klikker første gang, men når jeg klikker på en annen lenke, får jeg feilen

core.js:1673 FEIL Error: Uopptatt (i løfte): Feil: Kan ikke matche noen ruter. URL-segment: 'dashboard/page1/page2'.

app-routing.module.ts

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'dashboard/:name', component: DashboardComponent, canActivate: [AuthGuard] }

Svar #1

Endre din routerLink ved å legge til /dashboard/ foran:

[routerLink]="'/dashboard/' + cat.categories"

Hvis det første segmentet begynner med /, vil ruteren slå opp ruten fra roten av appen.

Hvis det første segmentet begynner med ./, eller ikke begynner med en skråstrek, vil ruteren i stedet se i barna til den nåværende aktiverte ruten.

Og hvis det første segmentet begynner med ../, vil ruteren gå ett nivå opp.

Svar #2

Min løsning på dette problemet er å bruke en tjeneste som SetRouterService.ts som vist nedenfor

import { Injectable } from '@angular/core';

import { Router } from '@angular/router';

@Injectable()

export class SetRouterService {

constructor(  private router: Router ) {}

public set_router( routing , route  ) {

  if ( routing.data == false ) { // router without any data in url ..... ...........................

    if( routing.relative == true ){

      this.router.navigate( [ routing.path ],

          {
            relativeTo: route
          }
      );

    }else{

      this.router.navigate( [ routing.path ] );
    }
    return;
  }

  // router with data in url ..........................................

  let paramsInUrl:any = {};

  if( routing.data instanceof Array ){   //  array of object with params ..........................................

      for( let param of routing.data ){ // loop

          paramsInUrl[param.keyparams] = param.params.toString();
      }

  }else{ // single param ....................................

      paramsInUrl = { [routing.data.keyparams] : routing.data.params.toString() };
  }


  if( routing.relative == true){

    this.router.navigate( [ routing.path ] ,

        {
            relativeTo: route ,  queryParams: paramsInUrl
        }
    );

  }else{

    this.router.navigate( [ routing.path ] ,

        {
            queryParams: paramsInUrl
        }
    );
  }
return;
}

}

så du kan importere det der du vil bruke det som nedenfor

import { SetRouterService } from '../../../share_services/set-router.service';

import { ActivatedRoute } from '@angular/router';

export class componentName implements OnInit  {

   constructor(

       private setRouter :SetRouterService ,

       private route:ActivatedRoute ,

   ){}
}

da kan du bruke det, bare kall set_router-metoden og send parametere med objektet du trenger for spesifikk navigasjon
parametere du kan sende er: path, data er for å sette parametere med array eller false når du ikke trenger å sette parametere i ruten, relative true eller false som i eksemplet nedenfor

let router = { path:'shopping/products/'+dynamic_path , data:
    [
      {keyparams :'id', params:  category.id },
      {keyparams :'page', params:  1 }

    ] , relative:false };

this.setRouter.set_router( router , this.route );