Angular 2/4在运行时选择路由器插座

Question

我在模板中有一个子<router-outlet>，根据单击的菜单项显示各种组件。每个子组件都是响应式的，并在调整页面大小时自行处理。

问题是父组件。在桌面视图中，我们需要它是一种方式（flexboxes），而在移动设备中我们需要它是另一种方式。这归结为我们放置<router-outlet>。

显而易见的解决方案是让几个<div>的类的display: none/block有条件地设置@media个查询。

这就是我被困的地方。 Angular总是选择最嵌套的<router-outlet>用于儿童。即使在DOM（display: none）中技术上不再存在另一个，路由器也会在该出口内呈现该组件。

我查看了命名路由器插座，但需要在编译时设置路由器配置。我需要根据屏幕尺寸在运行时决定渲染哪个插座。

Answer 1

显然这是（目前）不可能的 Angular将始终选择最嵌套的<router-outlet>来容纳组件，在运行时无法确定。
我的解决方法是使用display: flex，display: grid和@media查询的邪恶融合来移动页面周围的<router-outlet>，使用CSS来确定它的显示位置。