Question

有点棱角分明的新手！在我们的Angular应用程序中，我们有一系列不同高度的div需要测量到像素，这样当div的测量值达到特定值时，假设每1000px，它会自动插入一个新的div到表现得像一个分页符并强制原始div系列下降到1000px的下一个“页面”。在javascript中，获得高度很容易实现，但据我所知，脚本没有办法正确地与角度应用程序对话以使其工作。我知道角度可能需要两次渲染div（一次最初，达到高度，然后再渲染）但我真的不确定如何去做。

有没有人对如何使这项工作有任何建议？谢谢！

示例：

<div class="original" style="height: 325px">
<div class="original" style="height: 225px">
<div class="original" style="height: 745px">
<div class="original" style="height: 325px">

所以这是我原来的一堆div，因为他们正在以棱角分明的方式闲逛。从他们的高度，你可以看到，当你点击745px div时，它将超过我对页面的1000px限制。如果745px div进入新页面，尝试将345px div添加到该页面将超过1000px，因此我需要另一个分页符。我正在寻找它以产生以下结果：

<div class="original" style="height: 325px">
<div class="original" style="height: 225px">
<div class="pageBreak">
<div class="original" style="height: 745px">
<div class="pageBreak">
<div class="original" style="height: 325px">

Answer 1

<div #id class="original" style="height: 325px">

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('id') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 


  this.el.nativeElement.offsetHeight;
}

Answer 2

您可以使用ViewChild获取父元素，使用它来获取AfterViewInit事件中的子元素，达到它们的高度，并根据您使用Renderer2的逻辑设置一些新值：

模板：

<div #mainContent>
  <div class="gantt section"></div>
  <div class="list section"></div>
</div>

组件：

import { Component, OnInit, AfterViewInit, Renderer2, ElementRef, ViewChild } from '@angular/core';

@Component({...})
export class Whatever implements OnInit, OnDestroy, AfterViewInit {

  @ViewChild('mainContent') contentEl: ElementRef;

  constructor(
    private renderer: Renderer2,
  ) {}

  ...

  // set the two main sections half of the available height
  ngAfterViewInit() {
    const ganttSection = this.contentEl.nativeElement.querySelector('.gantt .section');
    const listSection = this.contentEl.nativeElement.querySelector('.list .section');

    const initHeight = this.contentEl.nativeElement.offsetHeight;
    this.renderer.setStyle(ganttSection, 'height', `${initHeight / 2}px`);
    this.renderer.setStyle(listSection, 'height', `${initHeight / 2}px`);
  }

}

或者为每个元素分配一个id（特定于角度的#theid，而不是普通的id属性），并通过@ViewChildren全部提取它们，这样就可以避免使用querySelector电话，其余部分相同（只是不确定renderer.setStyle是否接受elementRef或elementRef.nativeElement）。

至于pageBreak元素 - 还不需要动态添加元素（在*ngFor之类的“生成器”之外），我建议事先用[hidden]="aFlag"或者*ngIf="aFlag"添加它们ngAfterViewInit根据计算结果在display中设置标志（前者只修改appendChild属性，后者从DOM中删除元素）。 Renderer2包含用于DOM操作的方法，例如insertBefore，var request = new XMLHttpRequest(); request.open('GET', '/urlOrPathToFile', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); // Now that the JSON is in the DOM and parsed, create your map markers in a loop through the locations } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send();等，以及元素创建。

渲染后以角度测量Div高度

2 个答案: