导航到另一个 url 时的 Angular 2 路由器不重置插座

问题描述

我有另一个名为 compose 的出口的路由，例如:

I have route with another outlet called compose, for example:

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

当我点击链接时，网址是:

When I clicking on the link the URL is:

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

那很好，但是当我点击这个时:

That's fine, but when I clicking on this:

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

网址还在插座里:

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

我找到的解决方案是像这样重置插座:

The solution I found is to reset the outlet like this:

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

但这太冗长和烦人了，因为我需要在每个链接中都这样做，有更好的方法吗?

But this is so verbose and annoying, because I will need do this in every link, There is a better way?

推荐答案

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

When you use [routerlink] it generates href dynamically on the basis of every URL change.

您可以按照以下方式进行处理:

You can work on this as below:

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

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

In your component add below function.

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

这篇关于导航到另一个 url 时的 Angular 2 路由器不重置插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！