如何在Clarity/Angular应用程序中设置两级路由器插座？

一个清晰/有棱角的新手问题

我遵循

Clarity

文档中描述的布局模型，只是想在

内容容器

级别引入一个

路由器插座

，如：

...
...
...

然后在下面我有一些组件，它们是两种布局格式中的一种

布局#1-带侧导航

布局#2-无侧导航

我注意到注入内容容器的组件现在不再填满所有可用的垂直空间

---

如何设置

导航

和

内容区

组件，使它们占据所有可用的垂直和水平空间？

我在浏览网页后找到了答案

router-outlet.router-flex + * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}


  <div class="content-container">
    <router-outlet class="router-flex"></router-outlet>
  </div>

router-outlet.router-flex+*{
显示器：flex；
flex:1自动；
弯曲方向：立柱；
}

---

。。。但实际上，对于更大角度的项目来说，这是一个“左手不跟右手说话”的问题。像flex这样的关键技术被默认路由系统破坏是不可信的。

我在浏览网页后找到了答案

router-outlet.router-flex + * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}


  <div class="content-container">
    <router-outlet class="router-flex"></router-outlet>
  </div>

router-outlet.router-flex+*{
显示器：flex；
flex:1自动；
弯曲方向：立柱；
}

---

。。。但实际上，对于更大角度的项目来说，这是一个“左手不跟右手说话”的问题。让flex这样的关键技术受到默认路由系统的破坏是不可信的。

问题是Angular为主机组件注入了额外的DOM元素，这会导致布局中断。你不应该添加CSS黑客，Clarity网站实际上也做了类似的事情

有关应用程序组件的信息，请参见，根据您选择的路线，导航是通过该路线添加的，而不是全局添加的

---

如果您希望全局执行此操作，我会根据当前路由有条件地显示和隐藏sidenav，而不是尝试将其嵌套在内部（这会破坏DOM结构）。

问题是Angular为主机组件注入了一个额外的DOM元素，这会导致布局中出现一些中断。你不应该添加CSS黑客，Clarity网站实际上也做了类似的事情

有关应用程序组件的信息，请参见，根据您选择的路线，导航是通过该路线添加的，而不是全局添加的

---

如果您希望全局执行此操作，我会根据当前路由有条件地显示和隐藏sidenav，而不是尝试将其嵌套在内部（这会破坏DOM结构）。

我也有同样的问题。我通过向组件选择器添加内容容器类解决了这个问题。在您的情况下，您可以执行以下操作：

布局组件.ts

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
  host: {'class': 'content-container'}
})

---

这避免了与默认情况下在每个组件中添加的标记冲突。

我也遇到了同样的问题。我通过向组件选择器添加内容容器类解决了这个问题。在您的情况下，您可以执行以下操作：

布局组件.ts

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
  host: {'class': 'content-container'}
})

这避免了与默认情况下在每个组件中添加的标记的冲突