javascript - 如何在 Ionic 4 中获取变量中的 div 值

Question

我使用的是 Ionic 4，我想获取 div 中的文本，下面是 home.page.html

的代码

<ion-item>
    <div id="Target" class="editable"  [innerHtml]="resume" contenteditable>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
     <br>
</ion-item>

<br>
<button ion-button (click)="fetch_div()">Fetch Div Value</button>
</ion-content>

home.page.ts

fetch_div(){
    //code to fetch the value of div
    var ElementClass = document.getElementById("Target").className;
    console.log("---");
    console.log(ElementClass);
}

单击获取 Div Value 时，我想获取 div 中写入的所有内容，div 的示例屏幕截图如下所示:

我怎样才能实现这个目标？

Answer 1

使用ElementRef，

app.component.html:

<div #test>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

app.component.ts:

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

@ViewChild("test") testdiv: ElementRef;
// For angular 8+, @ViewChild("test", {static: false}) testdiv: ElementRef;

fetch_div(){
    console.log(this.testdiv.nativeElement.innerHTML);
    console.log(this.testdiv.nativeElement.innerText);
}

演示:https://stackblitz.com/edit/angular-8v6mod