Angular 14 - 将所选组件从列表传递到详细信息页面

Question

我有以下问题，我一直无法找到解决方案：

当我加载列表页面时，我有一个视频列表（它们在列表页面上播放）

<ion-col class="category-item travel-category" size="12" *ngFor="let item of videos"
 [routerLink]="['/app/video-admin/details', item.IdVideo]"> 
  <app-video-player [videoId]="item.IdVideo">
  </app-video-player >
</ion-col>

所以我需要继续播放进入视频详细信息页面时选择的视频，由于视频已经在播放，我不想再次连接到 webrtc 源，重新播放大约需要 10 秒连接，我如何在详细信息页面“/app/video-admin/details”中重用（app-video-player）组件并保留其state？

最简单的方法是重新连接并在单击时搜索它的位置，但这意味着重新连接并搜索它在上一页（路由）上的位置，但这正是我想要避免的，我认为这不是一个好的解决方案。

有什么想法吗？ 谢谢

Answer 1

您需要设计布局，以便在导航到新路线时不会破坏视频播放器组件。

这意味着您的路线不应导航到新组件，而应在包含视频播放器和详细信息组件的组件内导航。 任何组件都可以有一个路由器出口，您可以使用子路由进行导航。

目前尚不清楚您希望布局是什么，但这是最简单的示例，详细信息组件位于视频列表下方：

组件 HTML

<ion-col class="category-item travel-category" size="12" *ngFor="let item of videos"
 [routerLink]="['details', item.IdVideo]"> 
  <app-video-player [videoId]="item.IdVideo">
  </app-video-player >
</ion-col>
<router-outlet></router-outlet>

路由模块

const routes: Routes = [
  {
    path: 'app/video-admin',
    component: VideoAdminComponent,
    children: [
      {
        path: 'details/:id',
        component: VideoDetailsComponent,
      },
    ],
  },
];

显然这不是您想要的布局，但这应该为您提供一般知识，以遵循您真正想要的内容。

文档： https://angular.io/guide/router#nesting-routes