Angular：如何使用子路由主到详细视图并返回？答案

【问题标题】：Angular: how to use child routes for master to detail views and back?Angular：如何使用子路由主到详细视图并返回？
【发布时间】：2021-01-10 18:30:14
【问题描述】：

我目前正在使用子路由进行主视图到详细视图的转换，但我不确定我做得对。

我已经创建了自己的模块和其中的组件。该模块有自己的路由器模块，其中配置了子路由。喜欢这里：

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: 'details',
        component: DetailsComponent
      }
    ]
  }
];

在这个列表视图（视口宽度的 25%）中，我想点击一个项目，以便详细视图（视口的 75%）出现在它旁边：

<div class="list">
  <mat-list role="list">
    <mat-list-item role="listitem" routerLink='details'>
      <div class="list-entry">
        <p>Lorem Ipsum</p>
      </div>
    </mat-list-item>
  </mat-list>
</div>

我以这种方式将我的附加路由器插座放置在父组件中：

  <div class="main-wrapper">
    <div class="header">
      <div class="title">
        <h4>Title</h4>
      </div>
      <filter-component></filter-component>
    </div>
    <div class="content">
      <my-list-component></my-list-component>
      <router-outlet></router-outlet> // Details should be loaded here
    </div>
  </div>

我的详细信息组件如下所示（单击图标时详细信息应关闭）：

<div class="wrapper">
    <i class="custom-icon-class" routerLink='my-list'></i>
    <h5 class="headline">Lorem Ipsum</h5>
</div>

我的路径应该是这样的：

仅显示列表视图：

localhost:3000/my-app/my-list

显示所选项目的详细信息（可能带有 id？）：

localhost:3000/my-app/my-list/details

当我点击详细视图中的 X 时，它应该会消失，以便我再次进入以下路径：

localhost:300/my-app/my-list

【问题讨论】：

标签： angular angular-material angular-routing angular-router angular-template

【解决方案1】：

看起来不错。一个建议，在细节部分，而不是routerLink='my-list' 你应该做routerLink="../"。

【讨论】：

我试过了，但它只是在我的路径末尾添加了 my-list，例如：localhost:3000/my-app/my-list/details/my-list。但我需要：localhost:3000/my-app/my-list/
routerLink="../" 是否将/my-list 添加到网址中？
加载父组件的url是什么？
是否 routerLink="../" 将 /my-list 添加到 url --> 是的。父 URL 是 /mylist。我想回到那条路。
不应该这样。 ../ 应该会让你更上一层楼。