Angular 当窗口大小低于800px时，如何路由到不同角度的页面？

我正在创建一个显示表格的Angular 8浏览器。因为有很多列，当窗口太小时，我想显示一个列较少的表，可以向下展开以显示更多信息。我已经在不同的html文件中创建了这两种不同的布局。当屏幕达到一定大小时，是否有方法使用扩展行视图路由到文件，然后在屏幕足够大时使用常规表视图路由回文件？这是如何完成的？

您可以在父组件中执行此操作，以便使用以下方式加载合适的子组件

import {BreakpointObserver} from '@angular/cdk/layout';

检查以进行游戏。更改输出窗口的屏幕大小，以查看相应地加载了

较大的

或

较小的

组件

编辑：

要

取消订阅

，您需要将订阅和取消订阅存储在上，如-

private bpoSubscription: Subscription;

---

检查

到目前为止您尝试了什么？我不会在“调整窗口大小”上转到新页面。我会在父组件中听窗口调整大小，然后使用ngIf或类似工具在大/小表组件之间切换。导航对于删除/添加同一个表中的列来说似乎有些过分。谢谢，这很有效！如何使其仅检查此页面的最小宽度？它正在检查所有页面并导航到较小的视图，以查看与此表不相关的其他页面，这些页面具有不同的视图选项。如果您从该特定组件的

ngondestory

中附加的侦听器中取消订阅

，我收到了这个错误：core.js:6014错误：Uncaught（承诺中）：NullInjectorError:StaticInjectorError（AppModule）[ListComponent->Subscription]：StaticInjectorError（Platform:core）[ListComponent->Subscription]：NullInjectorError:没有订阅的提供者！NullInjectorError:StaticInjectorError（AppModule）[ListComponent->Subscription]：StaticInjectorError（Platform:core）[ListComponent->Subscription]：在回答中更新。检查这是否适用于您@BDev14
ngOnInit(){

    // Listen to changes in screen width
    this.bpo.observe(['(min-width: 800px)'])
    .subscribe(result => {
        if (result.matches) {
        // Navigate to larger view
        } else {
        // Navigate to smaller view
        }
    });
}

private bpoSubscription: Subscription;

this.bpoSubscription = this.bpo.observe(['(min-width: 800px)'])
                       .subscribe(result => {
                         if (result.matches) {
                         // Navigate to larger view
                         } else {
                         // Navigate to smaller view
                         }
                        });

ngOnDestroy(){
   this.bpoSubscription.unsubscribe();
}