保留在 DOM 中的所有路由的 div

Question

我正在开发一个使用 Vimeo 对象的 Angular 应用程序。我正在使用路由，并且在其中一个组件/页面中，我显示视频的那个，我有以下 div：

<div id="VimeoVideoDiv" class="message-fullarea" data-vimeo-controls="false" data-vimeo-autoplay="false"></div>

因此，当显示视频页面时，vimeo 在这里渲染得很好，它会注入一个 iframe，一旦您按下播放，它就会开始缓冲，然后播放视频。在某些时候，我想暂停视频并移动到另一个页面以捕获一些数据。提交数据后，我想将用户重定向到视频页面并继续从它离开的地方播放视频。问题是视频从头开始播放。您可能认为我可以将时间设置为暂停的 x 秒，但这样做会导致再次缓冲，这是我想避免的。

这是因为当路由到捕获数据页面时，视频页面被破坏（从 DOM 中删除）。我想的一种方法是将 vimeo 播放器 div 保留在 app.component.ts 中，在路由器出口之前，并以某种方式将其注入视频页面/组件。

这可能吗？还有其他选择吗？

Answer 1

是的，可以将其添加到app.component.ts 以确保它不会被破坏。

另一个想法是将组件包装在另一个组件中并在内部使用<router-outlet></router-outlet>。

在模块中应该是这样的：

const routes:Routes = [
{path:'', component:VimeoContainerComponent, children: [
    {path: 'somepath', component:SomeComponent },
    {path: '....', .... } ,
    ....
    ]}
]

VimeoContainerComponent 应该如下所示：

<div id="VimeoVideoDiv" class="message-fullarea" data-vimeo-controls="false" data-vimeo-autoplay="false"></div>
<router-outlet></router-outlet>

现在将显示它的所有子元素，并且 div 将保持不变。

另外，你没有把你的app.component弄脏！

欲了解更多信息， https://angular.io/guide/router#nesting-routes

Answer 2

您可以尝试为您的应用实现RouteReuseStrategy。这将允许您分离您的视频路线，而不是销毁它、存储它并在以后重复使用它。重用的路由会渲染得非常快——基本上就像路由缓存一样。

这不是 Angular 中一个有据可查的功能（或者是一个方便的功能，恕我直言），你必须四处看看如何使用它，但这里有一些东西可以帮助你入门：

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes = new Map<any, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.isVideoRoute(route);
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRoutes.set(route.routeConfig, handle);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRoutes.has(route.routeConfig);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.storedRoutes.get(route.routeConfig);
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  private isVideoRoute(route: ActivatedRouteSnapshot): boolean {
    // Determine somehow that this is the route containing the video.
  }
}

这是一个非常原始且有缺陷的实现，您可能需要做很多事情才能使其真正正常工作，例如：

• 如果存储的路线在某些时候没有被重复使用，则手动销毁它；
• 使用不同的机制来存储路线；
• 实现一些方法，例如ngOnReactivate，路由即将恢复时调用；
• 等