我想通过 router-outlet 添加的所有组件使用 flexboxes 占用页面的所有可用高度和宽度。感谢ToolmakerSteve's answer对于“如何使嵌套的 flexboxes 工作”，我知道使用以下基本 HTML 和 CSS 可以获得预期的结果:
HTML:
<div id="flexbox-outer">
<div id="flexbox-middle">
<div id="flexbox-inner">
</div>
</div>
</div>
CSS:
html, body {
height : 100%;
width : 100%;
}
.flexbox-outer {
display : flex;
flex-direction : column;
}
.flexbox-middle {
flex : 1;
display : flex;
flex-direction : column;
}
.flexbox-inner {
flex: 1;
}
但是，当我将这些类应用于基本的 Angular 应用程序时，带有 flex-box-inner 类的 div 并没有占据页面的整个高度如预期的。下面是不起作用的代码示例(和 stackblitz of the issue ):
index.html 和 app.component.html(此处合并):
<html>
<body>
<app-root>
<div class="flexbox-outer">
<div class="flexbox-middle">
<router-outlet></router-outlet>
</div>
</div>
</app-root>
</body>
</html>
foo.component.html:
<div class="flexbox-inner">
This should take up the entire width and height of the page.
</div>
如何让foo.component.html模板的内容占满整个页面的高度？
最佳答案
经过一些检查，我了解到通过router-outlet 添加的组件不会替换router-outlet，而是在同一级别添加自己的托管元素router-outlet 的。所以，我认为的文档结构是这样呈现的:
<html>
<body>
<app-root>
<div class="flexbox-outer">
<div class="flexbox-middle">
<!-- Removed, and replaced with contents of foo.component.html? -->
<!-- <router-outlet></router-outlet> -->
<div class="flexbox-inner">
This should take up the entire width and height of the page.
</div>
</div>
</div>
</app-root>
</body>
</html>
实际上是这样渲染的:
<html>
<body>
<app-root>
<div class="flexbox-outer">
<div class="flexbox-middle">
<router-outlet></router-outlet>
<foo>
<div class="flexbox-inner">
This should take up the entire width and height of the page.
</div>
</foo>
</div>
</div>
</app-root>
</body>
</html>
因此，为了使这一切正常工作并让 foo.component.html 的内容填充页面的高度，我只需要添加 flexbox-middle类到 FooComponent 的宿主元素，如下所示:
@Component({
selector : 'app-foo',
templateUrl : './foo.component.html',
host : { 'class': 'flexbox-middle' }
})
export class FooComponent { }
工作结果的完整代码可用here .
关于html - 如何在 Angular 组件中使用嵌套的 flexbox？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58703997/