如何从 angular 9 中的子组件重定向到父路由？

Question

我有下一个路由配置

 const appRoutes: Routes = [


 {path: '', component: HomeComponent},
  {path: 'Home', component: HomeComponent},
  {path: 'Clients', component: ClientsComponent},
  {path: 'Client', component: ClientComponent,children:[
      {path:'Home',redirectTo:'Home',pathMatch:'full'},
      {path:'Files',component: FilesComponent,},
      {path:'Contacts',component:ContactsComponent}
    ],},
  {path: 'Users', component: UsersComponent},
  {path: 'User', component: UserComponent},
  {path: '**', component:HomeComponent}
]

我有几个路由器插座，一个在 app.component.html 中，第二个在另一个组件中，看起来像这样

<app-client-menu></app-client-menu>
<router-outlet></router-outlet>

我想从客户端菜单重定向到以这种方式在 app.component.hmtl 中呈现的主页

<ul class="sidenav sidenav-fixed" id="mobile">
  <li>
    <div>
      <div class="background">
        <img src="assets/images/clientsBanner.jpg" class="responsive-img" alt="empleados">
      </div>
    </div>
  </li>
  <li><a [routerLink]="['Files']">Files</a></li>
  <li><a [routerLink]="['Contacts']">Contacts</a></li>
  <li><a >Update Client</a></li>
  <li><a >Delete Client</a></li>
  <li><a [routerLink]="[ { outlets: {home:['Home'] } }]"><i class="material-icons green-text ">home</i>Home</a></li>
</ul>

但是当我这样做时，我最终找不到页面并且这个 url 看起来像 Client/Files/Home insted of /Home 我该如何解决这个问题？

Answer 1

您将 Home 定义为子路由和顶级路由。我假设目的是让子路由中的 home link 重定向到顶级路由？

如果是这样，这是不必要的。

删除子 Home 路由并将路由器 link 更改为

首页首页

Answer 2

您可以移动 "backward" 添加 ../，就像您可以在 cmd 中使用它一样。所以在你的情况下，它将是这样的：

  <li><a routerLink="../Home">Home</a></li>

如果您想使用数组，它可能看起来像这样：

 <li><a [routerLink]="['../','Home']">Home</a></li>

如何从 angular 9 中的子组件重定向到父路由？

How to redirect to a parent route from a children component in angular9?

angular-routing

router-outlet

angular