angular - angular2 中路由器导出的高度

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 时。

准确的说，我想获取router-outlet的scrollheight，但是每次都返回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;}

一些组件.ts

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

Answer 1

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

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