本文介绍了导航到另一个 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 路由器不重置插座的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 16:23