在Angular Material中，如何使工具栏上的项目只显示在移动屏幕上的第二行？

Question

在Angular Material网站(https://material.angular.io/)上，这是工具栏在桌面上显示时的外观

​

​

在移动设备上，菜单项Components、CDK、Guides链接在第二行，但github、主题图标和版本号下拉列表仍然在第一行。

​

​

这是怎么做的？没有任何文档或示例说明如何做到这一点。

Answer 1

实际上，该网站有两个导航栏。桌面设计中的组件按钮与移动设计是不同的。它们在桌面模式下显示完整的导航栏，而在移动模式下隐藏一些组件并显示移动辅助导航栏。

因此，您可以

• 创建两个导航栏-桌面和移动
• 在桌面设计中显示包含所有导航项目的桌面导航栏
• 在移动设计中显示移动导航栏并隐藏桌面导航栏中的某些导航项目

Answer 2

您可以创建一个函数来检查设备是否是移动设备，如下所示

isMobileDisplay() {
  return (window.screen.width <= 576)
}

在html中，您可以使用*ngIf根据屏幕大小呈现模板，如下所示

<div *ngIf="!isMobileDisplay(); else smallDisplay">
</div>


<ng-template #smallDisplay>
</ng-template>

你可以为两种类型的屏幕尺寸编写2个模板