如何在Angular组件中使用嵌套的flexbox? [英] How to use nested flexboxes with Angular components?
问题描述
我想使通过路由器插座添加的所有组件都使用flexbox占用页面的所有可用高度和宽度.感谢 ToolmakerSteve的答案如何使嵌套Flexbox正常工作"，我知道可以实现预期的结果使用以下基本HTML和CSS:
I want to make all components added in through the router-outlet take up all of the available height and width of the page using flexboxes. Thanks to ToolmakerSteve's answer to the "how to make nested flexboxes work", I know that it is possible to achieve the desired results using the following basic HTML and 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 ):
However, when I apply those classes to a basic Angular application, the div with the flex-box-inner class does not take up the entire height of the page as desired. Below is an example of the code that is not working (and a 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 模板的内容来占据页面的整个高度?
How can I get the contents of the foo.component.html template to take up the entire height of the page?
推荐答案
经过检查，我了解到通过 router-outlet 添加的组件不会替换 router-out ，而是在 router-outlet 的同一级别添加自己的托管元素.因此，我认为的文档结构是这样呈现的:
After some inspection, I learned that components added through the router-outlet do not replace the router-outlet, but rather add their own hosting element at the same level of the router-outlet. So, the document structure that I thought was rendered like so:
<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 的主机元素，如下所示:
So, to make this all work and have the contents of foo.component.html fill the height of the page, I just needed to add the flexbox-middle class to the host element of the FooComponent like so:
@Component({
selector : 'app-foo',
templateUrl : './foo.component.html',
host : { 'class': 'flexbox-middle' }
})
export class FooComponent { }
可在此处获得完整的工作结果代码.
The full code for the working result is available here.
这篇关于如何在Angular组件中使用嵌套的flexbox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
