移动端的离子底部标签和桌面端的侧边菜单答案

【问题标题】：Ionic bottom tabs on mobile and side menu on desktop移动端的离子底部标签和桌面端的侧边菜单
【发布时间】：2020-02-29 14:49:25
【问题描述】：

您好，我正在用 ionic 4 和 angular 构建一个应用程序，我有一个左侧菜单，但我想要完成的是，当我在移动设备上时，该菜单位于底部选项卡上，当我m 在较大的屏幕上，菜单移动到左侧。我一直无法做到这一点，谁能指出我正确的方向？

【问题讨论】：

您找到解决方案了吗？我想用 Ionic 5 实现相同的功能。

标签： angular mobile ionic4

【解决方案1】：

自己管理响应式断点的一种方法是隐藏在 Material CDK 中的一个功能，称为布局：

https://material.angular.io/cdk/layout/overview

我过去曾使用它向ngx-datatable 添加响应式布局。

Alligator.io 有一个good introduction to this subject。

使用它的一种方法是设置一些断点，以及一个存储当前断点的变量：

  public readonly LAYOUT = {
    XS: 768,
    SM: 992,
    MD: 1200,
    LG: 1600,
    XL: 1920,
    XXL: 2560,
  };
  public layout: number = this.LAYOUT.MD;

然后在ngOnInit 中设置它以便自动管理：

    // Setting up breakpoint mechanism
    const breakpoints = Object.keys(this.LAYOUT).map(k => this.LAYOUT[k]);
    breakpoints.forEach((maxWidth, index) => {
      const minWidth = (index > 0) ? breakpoints[index - 1] : 0;
      this.breakpointObserver
        .observe([`(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`])
        .subscribe((state: BreakpointState) => {
          if (!state.matches) { return; }
          this.layout = maxWidth;
          console.log('Layout', this.layout);
        });
    });

至于您正在寻找的实际功能，这只是设置两个 UI，然后使用ngIf 使用 CDK 信息显示或隐藏它们的情况：

<app-some-component *ngIf="layout > LAYOUT.XS"></app-some-component>

【讨论】：