Angular 7-如何根据窗口大小处理两个不同的导航栏？

Question

我的问题很简单，

我正在一个项目的开始，我刚完成了Sidenav（位于屏幕左侧），我实际上将其用作组件。当窗口较小时，我想使用“常规”顶部导航栏，但我不知道如何实际实现。顶部导航栏是否需要其他组件？如果是这样，如何根据窗口大小在那两个之间切换？

我顺便使用Materialize CSS ...

Answer 1

我有类似的问题。在Angular中创建简历时，我想在屏幕大于700px时显示mat-horizontal-stepper，而在屏幕小于700px时显示mat-vertical-stepper。因此，我创建了一个HostListener至window:resize事件。

This is my deployed resume, if you resize you can see the expected behavior.

This is how my HTML with horizontalStepper, at line 23 you can see that if the value is true show something, otherwise show something else.

And this is my component's TS file, at line 36 you can find the HostListener.