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

当窗口尺寸小于800px时，如何路由到其他角度页面？

1 个答案: