如何在 Clarity/Angular 应用程序中有两个级别的路由器插座？答案

【问题标题】：How to have two levels of router-outlet in Clarity/Angular app?如何在 Clarity/Angular 应用程序中有两个级别的路由器插座？
【发布时间】：2020-07-16 16:27:42
【问题描述】：

Clarity/Angular 新手问题...

我遵循Clarity 文档中描述的布局模型，除了我想在.content-container 级别引入router-outlet，例如：

<div class="main-container">
  <div class="alert alert-app-level">...</div>

  <header class="header header-6">...</header>

  <nav class="subnav">...</nav>

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

然后在下面我有许多组件，它们是两种布局格式之一......

布局 #1 - 带有侧边导航

<div class="content-container">
  <nav class="sidenav" height="100%" style="background: chartreuse">
  </nav>

  <div class="content-area" height="100%" width="100%" style="background:brown">
    <router-outlet></router-outlet>
  </div>
</div>

布局 #2 - 无侧边导航

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

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

如何设置nav 和.content-area 组件，使它们占据所有可用的垂直和水平空间？

【问题讨论】：

标签： angular vmware-clarity

【解决方案1】：

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

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>

...但对于更广泛的 Angular 项目来说，这实际上是一个“左手不与右手交谈”的问题。像 flex 这样的关键技术被默认路由系统破坏是不可信的。

【讨论】：

【解决方案2】：

问题在于 Angular 为宿主组件注入了一个额外的 DOM 元素，这会导致布局中断。您不必添加 CSS hack，Clarity 网站实际上做了类似的事情。

有关应用程序组件，请参阅 https://github.com/vmware/clarity/blob/master/src/website/src/app/app.component.html，根据您前往的路线，导航是由该路线添加的，而不是全局添加的。

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

【讨论】：

【解决方案3】：

我遇到了同样的问题。我已经通过将内容容器类添加到组件选择器来解决它。在你的情况下，你可以这样做：

LayoutComponent.ts

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

这样就避免了和angular在每个组件中默认添加的标签冲突。

【讨论】：