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

Question

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

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 玩。更改输出窗口的屏幕大小，以查看 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