(真是tm找了好久,艹)
参考:
个人:
https://blog.csdn.net/u010467784/article/details/73605201

点击路由,没有跳转,没有报错。
现象一:
使用html中的路由跳转方式:eg:

<button nz-button routerLink="/pages/device-mgmt/over-view">跳转OverView</button>
<button nz-button routerLink="/pages/basic-mgmt/user-mgmt">跳转UserMgmt</button>
  1. pages.html写菜单,如果路由跳转(上面的代码)放在pages里面,那么是可以跳转的;
  2. 但是,如果我将菜单menu(上面的代码)提出来,放在菜单组件(shareModule)里面,那么此时点击菜单,是没有跳转的,无效行为。
  3. 但是,使用ts里路由跳转是ok的。eg:
this.router.navigate([‘xxxxxxxxxxx’]);

相应的html资源对照:

<button _ngcontent-c2="" nz-button="" routerlink="/pages/basic-mgmt/user-mgmt" class="ant-btn ant-btn-default" nz-wave="[object Object]"><span>跳转UserMgmt</span></button>

// 正常时候的资源:
<button _ngcontent-c3="" nz-button="" routerlink="/pages/basic-mgmt/user-mgmt" class="ant-btn ant-btn-default" tabindex="0" ng-reflect-router-link="/pages/basic-mgmt/user-mgmt" nz-wave="[object Object]"><span>跳转UserMgmt</span></button>

==>ng-reflect-router-link 存在,且有值;

解决方法:
在shareModule里面依赖RouterModule,并导出;
eg:我的代码:


@NgModule({
  declarations: [
    BaMenuComponent,
  ],
  imports: [
    CommonModule,
    RouterModule, // 引入
    NgZorroAntdModule,
  ],
  exports: [
    BaMenuComponent,
    CommonModule,
    FormsModule,
    RouterModule, // 导出
	// ...
  ]
})
export class NgaModule {
}

现象二:
html:使用了"[]"的方式

<button nz-button [routerLink]="['/pages/device-mgmt/over-view']">跳转OverView</button>
<button nz-button [routerLink]="['/pages/basic-mgmt/user-mgmt']">跳转UserMgmt</button>

报错:

Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'button'. ("button nz-button routerLink="/pages/basic-mgmt/user-mgmt">跳转UserMgmt</button>-->

<button nz-button [ERROR ->][routerLink]="['/pages/device-mgmt/over-view']">跳转OverView</button>

==>此时就该发现问题的!!!!!

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐