使用routerLink返回

Question

我正在使用routerLink返回我的页面。

当前路线可以有3个级别：

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

此外，我有一些不同的组件，所以它不一定总是父级，它可以是parent1或parent2，也可以是子级和孙级，例如：

myurl.com/parent2/child1/grandchild2

我想要的总是转到上一级，例如：

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

我所做的是：

<button [routerLink]="['../'']">
       back
</button>

但它总是导航到“myurl.com”

我如何解决它？

正如一些用户所建议的，我正在共享我的路由配置：

应用程序内。路由。ts：

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

在父级中。路由。ts：

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

如果我在浏览器中写道：

myurl.com/parent -> it works

但点击后退按钮失败

Answer 1

这是在延迟加载模块时特别观察到的，这是一个已知的错误。

角度11：它很好用，开箱即用。

@NgModule({
  imports: [RouterModule.forRoot(routes, {})], // relativeLinkResolution === 'corrected' by default
  exports: [RouterModule],
})
export class AppRoutingModule {}

在Angular 11之前：显式地使用{relativeLink分辨率：“更正”}。

@NgModule({
  imports: [RouterModule.forRoot(routes, {relativeLinkResolution:'corrected'})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

您还可以设置{relativeLinkSolutions：'遗留'}以获取您面临的当前行为。

Answer 2

试试这个

Answer 3

如果你想“向上”一级导航，你几乎是对的。

<a routerLink="..">Up</a>

这将导航

myurl.com/parent/child/grandchild -> myurl.com/parent/child

然而，如果您想像浏览器的后退按钮一样真正地“后退”，则需要使用javascript。

关于这个StackOverflow问题，有各种各样的现有答案

对于任何更复杂的事情，这将完全取决于您正在尝试做什么，但可能需要一个单击处理程序和一些手动操作URL。