响应式网站使用角度2材料

Question

我的网站是使用角度1制作的，网站顶部有水平格式的菜单。此菜单在小屏幕设备上折叠，按下按钮时出现（弹出）。现在我想用材料将我的网页切换到角度2，但是没有找到确切的例子，因为许多样本的目的与我需要的不同。更有甚者，一些示例表明您需要使用flex才能获得响应式布局。所以现在我很困惑我是否应该使用flex或材料2。

this one对我不好，因为它不会扩展到宽屏幕。 你能帮助我吗？我是angular2和材料的新手。

Answer 1

我认为我已经做了一些接近你想要达到的目标。

@angular/flex-layout使您能够订阅屏幕尺寸更改。

因此，您可以根据屏幕大小以编程方式打开或关闭sidenav。

这里是example，我在其中定义sidenav应该在侧面或悬停内容： （因为我想要移动）

this.sidenavMode$ = this.media$
      .asObservable()
      .map((change: MediaChange) => {
        const screenSize = change.mqAlias;
        if (screenSize === 'xs' || screenSize === 'gt-xs' || screenSize === 'sm') {
          return `over`;
        } else {
          return `side`;
        }
      });

如果您想打开/关闭它，只需使用sidenav和.close()的引用。