当 window 大小低于 800 像素时，如何路由到不同的 angular 页面？

Question

我正在创建一个显示 table 的 Angular 8 浏览器。由于列数较多，当window尺寸太小时，我想显示一个table，列数较少，可以向下扩展以显示更多信息。我已经在不同的 html 文件中创建了这两种不同的布局。有没有一种方法可以在屏幕达到一定大小时使用扩展行视图路由到文件，然后在屏幕足够大时使用常规 table 视图路由回文件？这是怎么做到的？

Answer 1

您可以在父组件中使用 BreakPointObserver 按以下方式加载合适的子组件。

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

...

constructor(private bpo: BreakpointObserver){}

...

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
        }
    });
}

勾选 this StackBlitz 进行游戏。更改输出 window 的屏幕大小，以查看相应加载 larger 或 smaller 组件。

编辑：

要unsubscribe，您需要在subscription上存储订阅和退订，比如-

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();
}

勾选this updated Stackblitz

当 window 大小低于 800 像素时，如何路由到不同的 angular 页面？

How do I route to a different angular page when the window size is below 800px?

routing

responsive

angular