angular报错记录-routerLink

(真是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>

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值