Question

我遇到了一些问题，我想设计一个像flex:1和flex:2那样切片的框架。

将框架分开并希望左侧组件的高度与右侧组件相同。（如果右侧高度小于左侧，左侧显示100%）。

哈巴狗

.container(style='display:flex')
  .leftside(style='flex:1')
    some-component
  .rightside(style='flex:4')
    router-outlet

我之前实现了jquery，左侧组件完全渲染并且对scrollClient进行了修改，因此我设置service(injectable)并在router.event获得navigatorEnd时观察。

准确地说，我希望获得scrollheight router-outlet，但每次都会返回0。

service.ts（导出工具服务）

private routerHeight:number;
constructor(private router: Router) {
  this.router.events
    .filter(event => event instanceof NavigationEnd)
    .subscribe((event) => {
      this.routerHeight = document.getElementsByTagName('router-outlet')[0].scrollHeight;
    });
}

newheight(){ return this.routerHeight;}

一些-component.ts

constructor(private toolservice:Toolservice,private el:ElementRef){}
getNewHeight(){
    this.el.nativeElement.height = this.toolservice.newheight();
}

Answer 1

<router-outlet>标签本身没有高度，它是一个占位符标签，内容放置在下面 - 而不是放在里面。除了奇怪而不是“有角度”的代码之外，你可以使用我想的nextElementSibling属性：

this.routerHeight = document.getElementsByTagName('router-outlet')[0].nextElementSibling.scrollHeight;

Answer 2

好吧，我想你可以将router-outlet放在div内并获得该{div}的scrollHeight。

<div>
  <router-outlet></router-outlet>
</div>

router2的出口高度

2 个答案: