Angular 2路由器导航到另一个URL而不重置插座

Question

我有另一个名为compose的出口路线，例如：

<a [routerLink]="[{outlets: {primary: 'about', compose: 'new-message'}}]">About with compose</a>

当我点击链接时，URL是：

http://localhost:4200/about(compose:new-message)

那没关系，但是当我点击这个时：

<a routerLinkActive="active" [routerLink]="['/home']">Home</a>

网址仍然是插座：

http://localhost:4200/home(compose:new-message)

我找到的解决方案是重置插座，如下所示：

 <a [routerLink]="[{outlets: {primary: 'home', compose: null}}]">Home</a>

但这是如此冗长和烦人，因为我需要在每个环节都这样做，有更好的方法吗？

Answer 1

当您使用[routerlink]时，它会根据每个URL更改动态生成href。

您可以按照以下方式处理此问题：

//url = '/home' in ur case
<a (click)='changeRoute(url)'></a>

在您的组件中添加以下功能。

routChange(url){
   this.router.navigateByUrl(url);
}