如何在清晰/角度的应用程序中有两个层次的路由器出口？
如何在清晰/角度的应用程序中有两个层次的路由器出口？
提问于 2020-04-04 14:50:56
清晰/有角度的新手问题..。
我遵循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组件，使它们占用所有可用的垂直和水平空间？
回答 3
Stack Overflow用户
发布于 2020-10-11 19:10:17
我也有同样的问题。我通过将内容容器类添加到组件选择器来解决这个问题。在你的例子中，你可以这样做：
LayoutComponent.ts
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
host: {'class': 'content-container'}
})这避免了与在每个组件中默认添加角标记的冲突。
Stack Overflow用户
发布于 2020-04-06 09:24:43
我在浏览网页后找到了答案..。
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>..。但实际上，这是一个“左手不和右手说话”的问题，对于更宽的角度项目来说。像flex这样的关键技术被默认的路由系统破坏是不可信的。
Stack Overflow用户
发布于 2020-04-07 13:43:53
问题是角向主机组件注入一个额外的DOM元素，它会导致布局上的一些中断。你不应该增加一个CSS黑客，清晰网站实际上做了一些类似的事情。
有关应用程序组件，请参见https://github.com/vmware/clarity/blob/master/src/website/src/app/app.component.html，而导航是由该路由添加的，而不是全局添加的，这取决于您要到哪个路由。
如果您希望在全局范围内这样做，我将根据当前路由有条件地显示和隐藏sidenav，而不是尝试将其嵌套在内部(这会破坏DOM结构)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61029893
复制相关文章
相似问题
腾讯云开发者
