Angular：如何从所有元素及其后代中获取文本？

Question

在 AngularJS 中，这很简单。我们可以使用angular.element().text()函数，它基本上只使用jQuery .text()函数来：

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代。

这正是我想在 Angular (v6) 中复制的内容，但我一直无法在他们的文档中找到任何替代此功能的方法。此外，我真的很想避免仅为这个用例加载 jQuery。

在旧版 AngularJS 客户端中，我有这样的代码：

// Note: This html is actually coming from a server
var html = `<div>
              <span>Record final amount added to productA </span>
              <input ...>
              <br>
              <span >ProductA</span>: <span> Max Capacity 2500 kg</span>
              <span> Continue process for sequence B </span>
            </div>`;

var allText = angular.element(html).text();

Angular 中是否有替代方法来实现这一点，或者是否有一些新的既定模式可以做到这一点？

Answer 1

1.如果你想要来自DOM的innerText

@ViewChild为此使用

在您想要文本的 div 上添加一个模板变量。

<div #myDiv>This is the text in this div</div>

然后在您的组件类中，创建一个变量并@ViewChild通过首先从@angular/core.

@ViewChild('myDiv') myDiv: ElementRef;

这将为您提供内部文本。

ngAfterViewInit() {
  this.myDiv.nativeElement.innerText
}

2. 如果您只想获取没有 HTML 标签的内部文本

在您的 TypeScript 中，只需使用此正则表达式：

html.replace(/<[^>]*>/g, '');