Question

因此标题非常满口，我正努力在SO上得到一个确切的答案。我在容器div中有一些子div，每次加载页面时都会从数据库中加载数据。根据所选的选项，子div的垂直大小的变化取决于信息量（无固定大小）。但是（由于外观和感觉），我必须让子div也重叠并且彼此重叠（使用z-index），这意味着子div的所有属性都是position：absolute。这意味着当它们展开时，它们只是扩展到父容器的底部边缘，而不是“推”它，或者使它变大。

所以我想知道最好的方法是在Angular2中获取子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() {
  }

}

所以你可以看到它有三个盒子，两个在“底部”，一个在它们顶部。它们必须堆叠的事实也是为什么它们必须是“位置：绝对”的原因。但正如你可以看到，所有三个方框中的文字都超过了主容器的高度（或者甚至根本不影响它）。 所以我试图找到一种方法来获得最大的boks的高度，然后将该高度传递到主容器。

非常感谢任何帮助。

此致

- 更新＃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装饰器：

@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()"回调，并在我的.scss中定义了一个类似于transition: width 1ms, height 1ms;的转换，这对我有用。在adjustSize（）方法中，您可以设置所需的宽度和高度（可能是绝对定位的ViewChild的尺寸）并绑定父div中的值，如下所示：[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;
}

我知道这有点像黑客，但如果有效的话，它并不愚蠢。

更改父级div大小，因为子级变长，而位置为：Angular2中的绝对

2 个答案: