List 具有不同行为的角度响应列表

在过去的几天里，我一直在尝试用Angular（第一个是1.6，现在是4）和Angular材质制作一个项目列表，根据设备的大小，Angular材质的行为会有所不同

在大屏幕上，我希望列表项目位于左侧，所选项目的扩展细节占据屏幕的大部分

在移动设备（或任何小屏幕）上，预期行为是让项目列表占据整个屏幕，通过切换到不同屏幕（即状态）单击项目显示扩展数据

在Angular 1.6中，我通过使用状态设计模式并根据屏幕大小向控制器注入一个点击处理程序，成功地做到了这一点

有没有更优雅的解决方案？ 在我看来，在路由逻辑中玩路由和检查屏幕大小似乎有点老土，但我找不到更可行的解决方案

谢谢，阿维