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中有几个routerout，一个在另一个componente中，第二个是这样的

<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看起来像是/ Home的Client / Files / Home，我该如何解决呢？

Answer 1

您可以向后移动，添加../，就像在cmd中使用它一样。因此，在您的情况下，将是这样的：

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

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

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

Answer 2

您已将Home定义为子路线和顶部路线。我以为是要将子路径中的home链接重定向到顶部路径？

如果是这样，则没有必要。

删除子级Home路由并将路由器链接更改为

homeHome

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

2 个答案: