无法从 innerHTML 获取动态数据 - Angular答案

【问题标题】：Can't get dynamic data from innerHTML - Angular无法从 innerHTML 获取动态数据 - Angular
【发布时间】：2018-06-19 04:08:26
【问题描述】：

我正在从我的视图或 HTML 中获取动态数据，并将其放置在我的页面上，以便我可以查看所述数据的打印结果。我必须使用这种方法，因为我正在创建自己的打印页面，上面有这些动态数据。我正在使用的方法获取第一个初始值，而不是最新更新的 DOM。如果我删除 .innerHTML，我可以看到动态数据，但不确定是否有办法在没有 .innerHTML 的情况下获取该数据。

click(data){
this.newData = data
let printContents, popupWin;
    if(document.getElementById('print-section') != null){
      printContents = document.getElementById('print-section').innerHTML;
      popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
      popupWin.document.open();
      popupWin.document.write(`
        <html>
          <head>
            <title>Print tab</title>
            <style>
            //........Customized style.......
            </style>
          </head>
          <body onload="window.print();window.close()">${printContents}</body>
        </html>`
      );
      popupWin.document.close();
    }

}

HTML

<div id="print-section" style="display:none">
        <div>
            <p>{{newData.id}}</p>
        </div>
 </div>

【问题讨论】：

你能附上一个plunk吗？
你可以改用[inner HTM]属性绑定
@Aravind 他正在尝试获取未在模板中设置的 html 内容。属性绑定不是解决方案。我建议使用 ViewChild。请参阅下面的答案。
@VishalGulati 是正确的，我会检查你的解决方案。

标签： javascript html angular ionic-framework

【解决方案1】：

你得到了元素的旧内容，因为 Angular 的变化检测机制没有在对 this.newData 的变化和你得到 div 内容的语句之间更新 DOM。 HTML 输出只会在当前执行周期之后更新。

您可以使用多种技术强制更改检测（请参阅this answer）。其中之一是致电ChangeDetector.detectChanges()。

顺便说一句，Angular 在代码中访问 DOM 元素的方式是使用@ViewChild(varname) 和template reference variables，而不是调用document.getElementById。

<div #printSection style="display:none">
  <div>
    <p>{{newData.id}}</p>
  </div>
</div>

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';

export class MyComponent {

  @ViewChild("printSection") printSectionRef: ElementRef;

  constructor(private changeDetector: ChangeDetectorRef) {
  }

  click(data) {
    this.newData = data
    this.changeDetector.detectChanges(); // Trigger change detection
    let printContents, popupWin;
    if (this.printSectionRef && this.printSectionRef.nativeElement){
      printContents = this.printSectionRef.nativeElement.innerHTML;
      ...
    }
  } 
}

【讨论】：

欣赏有关变更检测的详细信息。干杯！

【解决方案2】：

我建议使用 ViewChild：我们视图中的子组件可以通过 @ViewChild 轻松地从父组件访问。

<div id="print-section" #printContainer style="display:none">
        <div>
            <p>{{newData.id}}</p>
        </div>
</div>

在组件中：

export class MyComponent{
  @ViewChild('printContainer') private printContainer: ElementRef; //import ElementRef
  constructor() {
  }

}

点击方式：

click(data){
this.newData = data
let printContents, popupWin;
    if(document.getElementById('print-section') != null){
      printContents = this.printContainer.nativeElement.innerHTML;

      // rest all remains same
    }

}

也可以在how to perform DOM manipulation in Angular Components!上查看这个非常相似的问题

【讨论】：