Html RouterLink在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>

通过预编

/dashboard/

更改您的密码：

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

如果第一段以

/

开头，路由器将从应用程序的根目录查找路由

如果第一段以

/

开头，或不是以斜杠开头，路由器将转而查找当前激活路由的子级

如果第一段以

。/

开头，路由器将上升一级

---

我对这个问题的解决方案是使用像SetRouterService.ts这样的服务，如下所示

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;
}

}

因此，您可以将其导入到您想要使用它的位置，如下所示

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 ,

   ){}
}

然后，您可以使用它调用set_router方法，并通过特定导航所需的对象传递参数
您可以传递的参数有：path，data是用array设置参数，当您不需要在route中设置参数时为false，relative true或false，如下例所示

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 );

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;
}

}

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 ,

   ){}
}

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 );