无法从 innerHTML 获取动态数据 - Angular
Posted
技术标签:
【中文标题】无法从 innerHTML 获取动态数据 - Angular【英文标题】：Can't get dynamic data from innerHTML - Angular 【发布时间】：2018-06-19 04:08:26 【问题描述】：我正在从我的视图或 html 中获取动态数据，并将其放置在我的页面上，以便我可以查看所述数据的打印结果。我必须使用这种方法，因为我正在创建自己的打印页面，上面有这些动态数据。我正在使用的方法获取第一个初始值，而不是最新更新的 DOM。如果我删除 .innerHTML，我可以看到动态数据，但不确定是否有办法在没有 .innerHTML 的情况下获取该数据。
TS
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%,');
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 是正确的，我会检查你的解决方案。
【参考方案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!上查看这个非常相似的问题
【讨论】：
以上是关于无法从 innerHTML 获取动态数据 - Angular的主要内容，如果未能解决你的问题，请参考以下文章