子路由中的 Angular 组件无法填充可用空间。

Question

子路由中的 Angular 组件无法填充可用空间。

angularangular2-routingangular2-templateangular-routingangular2-components

6

当导航到'/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属性包装我的组件，以实现预期结果。如何使我的组件填充可用空间？

这是我的期望结果

这是我实际得到的结果

- Lord Arryn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- constlhq · Accepted Answer

那是因为渲染后的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>

所以解决方案非常简单，为宿主元素添加一些样式，你可以在@Component{}中使用host:{'class':'foo'}或直接添加host:{'style':'width:100%'}，这样就能让你的ChildComponent更加易读。