Angular child 路线 router-outlet 内的组件将无法填充 space
Angular component inside of router-outlet on child route will not fill available space
当导航到“/child”路由时,我的应用程序的根 <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 路由时,比如“/child/home”,我希望以下 HTML 显示在 child <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>
但是这次router-outlet的内容并没有像我希望的那样填写可用的space。我能够看到我想要的结果的唯一方法是打开开发工具并编辑 Angular 生成的 _nghost 属性来包装我的组件。如何让我的组件填充可用 space?
这是我所期望的
这是我实际得到的
那是因为 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'}
或者直接在你的ChildComponent@Component{}
中添加host:{'style':'width:100%'}
当导航到“/child”路由时,我的应用程序的根 <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 路由时,比如“/child/home”,我希望以下 HTML 显示在 child <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>
但是这次router-outlet的内容并没有像我希望的那样填写可用的space。我能够看到我想要的结果的唯一方法是打开开发工具并编辑 Angular 生成的 _nghost 属性来包装我的组件。如何让我的组件填充可用 space?
这是我所期望的
这是我实际得到的
那是因为 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'}
或者直接在你的ChildComponent@Component{}
中添加host:{'style':'width:100%'}