当导航到'/child'路由时,我的应用程序根<router-outlet></router-outlet>
将在子模块中显示以下组件:
child.component.ts
请注意,本文已经翻译为中文。import {Component} from "@angular/core";
@Component({
template: `
<div style="display:flex; width: 100%; height: 100%;">
<custom-sidebar-component></custom-sidebar-component>
<router-outlet></router-outlet>
</div>`
})
export class ChildComponent {
}
现在这个组件显示得很好,并且像我预期的那样填满了整个屏幕。然而,当我尝试导航到该模块的子路由,比如 '/child/home',我希望以下 HTML 会在子组件模板中显示 <router-outlet></router-outlet>
。
child-home.component.html
<style>
.parent-style {
display: flex;
flex-flow: row wrap;
width: 100%;
height: 100%;
}
.box-style {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
background: red;
color: white;
border: 1px solid black;
}
</style>
<div class="parent-style">
<div class="box-style">Box 1</div>
<div class="box-style">Box 2</div>
</div>
但是这一次,路由出口的内容并没有填充我所期望的可用空间。目前唯一的方法是打开开发工具,编辑Angular生成的_nghost属性包装我的组件,以实现预期结果。如何使我的组件填充可用空间?