在Angular2中具有position:absolute时，随着子级变长，更改父级div大小

Question

所以标题太满了，我很难在So上找到确切的答案。我在容器div中有几个子div，每次加载页面时都会从数据库中加载数据。根据所选的选项，子div的垂直大小会随着信息量的变化而变化(没有固定大小)。但是(由于外观的原因)，我必须让子div也相互重叠和重叠(使用z-index)，这意味着子div都具有position的属性：absolute。这意味着，当它们扩展时，它们只会扩展到父容器的底部边缘，而不会"推动"它，也不会使它变大。

所以我想知道，最好的方法是在Angular2中获得子div的大小，使用最大的大小，并将父div的高度设置为这个大小(+比方说20px)。因为它是Angular2，我不想只使用jquery，因为这不是使用Angular的方式。

所以我添加了我的代码来显示我现在拥有的东西：

import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nlr-container-bottom-footer',
template: `<div id="main">    
<div id="boks3">
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
* <br>
</div>
<div id="boks2">
* <br>
* <br>
* <br>
* <br>
</div>
<div id="boks4">
* <br>
* <br>
* <br>
* <br>
</div>
</div>`,
styles: [`
#main {
background-color: yellow;
}
#boks2,
#boks3,
#boks4
{
background-color: red;
width: 32%;
position: absolute;
margin-left: 33.5%;
padding: 0px 0px 0px 5px;
z-index: 3;
text-align: left;
}
#boks2 {
background-color: blue;
margin-left: 17%;
z-index: 2;
height: 100px;
}
#boks4 {
background-color: green;
margin-left: 50%;
z-index: 2;
text-align: right;
height: 100px;
}
`],
})
export class ContainerBottomFooterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

正如你所看到的，它给出了三个盒子，两个在"底部"，一个在上面。事实上，它们必须是堆叠的，这也是为什么它们必须是"位置：绝对的"。但是，正如您所看到的，所有三个框中的文本都超过了主容器的高度(或者根本不影响它)。所以我正试图找到一种方法来获得最大bok的高度，然后将该高度传递到主容器

任何帮助都将不胜感激。

问候

--更新#2--

export class ContainerBottomFooterComponent {
@ViewChildren('.plates', {read: ElementRef}) //Here we say "Go look at the children (there is more than one) classes called 'plates', it then looks like we are reading all the ElementReferences of those classes"
public books: QueryList<ElementRef> //Here we are giving the variable "books" the list of off all the references of all the classes.
@ViewChild('main', {read: ElementRef})// Here we are reading a single reference of the div with id "main"
public mainContainerRef: ElementRef; // Here we are giving the variable mainContainerRef the element references of the div with ID class #main

constructor( private _renderer:Renderer) {
let height = this.books.reduce((height, bookRef) => {
let rect = bookRef.nativeElement.getBoundingClientRect();
return rect.height > height ? rect.height: height;
}, 0);
}
ngAfterViewInit() {
this._renderer.setElementStyle(this.mainContainerRef.nativeElement, 'height', height + 'px');
} 
}

Answer 1

您可以使用ViewChildren Decorator:

@ViewChildren('.itsABook', {read: ElementRef}) 
public books: QueryList<ElementRef>;
@ViewChild('main', {read: ElementRef})
public mainContainerRef: ElementRef;

然后迭代QueryList:

let height = this.books.reduce((height, bookRef) => {
let rect = bookRef.nativeElement.getBoundingClientRect();
return rect.height > height ? rect.height: height;
}, 0);

并使用Renderer:设置主容器的高度

this.renderer.setElementStyle(this.mainContainerRef.nativeElement, 'height', height + 'px');

HTML:

<div id="main" #main>
<div class="itsABook"></div>
<div class="itsABook"></div>
<div class="itsABook"></div>
</div>

还要记住，books和mainContainerRef的引用仅在ngAfterViewInit挂钩之后可用

编辑：添加了mainContainer 的参考

Answer 2

我在.html文件中使用了(transitionend)="onSizeChanged()"回调，并在我的.scs中定义了一个类似于sotransition: width 1ms, height 1ms;的转换，这对我很有用。然后，在adjustSize()方法中，你可以设置你想要的宽度和高度(可能是你的绝对位置ViewChild的尺寸)，并在你的父div中绑定值，比如so：[style.width.px]="width" [style.height.px]="height"。当遇到性能问题时，您可以使用BehaviorSubject并订阅它，使用auditTime()取消它。

HTML:

<div class="parent" [style.width.px]="width" [style.height.px]="height">
<div #child class="child" (transitionend)="onSizeChanged()>
/*this component can change in size*/
</div>
</div>

CSS：

.parent {
position: relative;
}
.child {
transition: width 1ms, height 1ms;
position: absolute;
}

打字：

@ViewChild('child') private child: ElementRef;
private _width = 0;
private _height = 0;
public get width(): number {
return this._width;
}
public get height(): number {
return this._height;
}
public onSizeChanged() {
this._width = this.child.nativeElement.scrollWidth;
this._height = this.child.nativeElement.scrollHeight;
}

我知道这是一种黑客行为，但如果它有效的话，那也不愚蠢。