子路径上路由器出口内的角组件将不会填充可用空间

Question

<router-outlet></router-outlet>导航到“ / child”路由时，我的应用程序的根目录将在子模块中显示以下组件：

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属性。如何获得我的组件以填充可用空间？

这是我的期望

这就是我真正得到的

Answer 1

这是因为呈现的DOM如下所示：

<app-child  _nghost-c1="">
<div _ngcontent-c1="" class="parent-style">
<div _ngcontent-c1="" class="box-style">Box 1</div>
<div _ngcontent-c1="" class="box-style">Box 2</div></div>
</app-child>

因此该解决方案是相当简单的，添加一些样式到主机元素，你可以使用host:{'class':'foo'}或直接添加host:{'style':'width:100%'}在@Component{}您的ChildComponent的