Question

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

当前路线可以分为3个级别：

ArgumentNullException

另外，我有一些不同的组件，因此它并不总是父代，例如对于子代和孙代，它可以是parent1或parent2，

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

我想要的始终是上一个级别，例如：

myurl.com/parent2/child1/grandchild2

我所做的是：

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

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

我该如何解决？

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

在app.routing.ts中：

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

在parent.routing.ts中：

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

如果在浏览器中我写过：

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

但单击“后退”按钮失败

Answer 1

如果您试图向上“导航”一个级别，那几乎是正确的。

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

这将导航

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

但是，如果要像浏览器的“后退”按钮那样真正地导航“后退”，则需要使用javascript。

针对该问题on this StackOverflow question

有多种现有的答案

对于更复杂的事情，这将完全取决于您要执行的操作-但可能需要单击处理程序和对URL的一些手动操作。

Answer 2

当它是延迟加载的模块并且是 a known bug时，会特别观察到这一点。

Angular 11 ：开箱即用，效果很好。

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

在Angular 11之前：明确使用{relativeLinkResolution: 'corrected'}。

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

您还可以设置{relativeLinkResolution:'legacy'}来获取当前面临的行为。

Answer 3

试试这个[routerLink]="['../child']"

使用routerLink返回

3 个答案: