javascript - 自定义指令将子文本推送到数组中

Question

我在 div 上有一个自定义指令

<div appAutoTypingText>
  <p>on va mettre un premier texte</p>
  <p>Puis un second texte</p>
</div>

我希望我的指令获取 p 标记内的文本并将它们推送到像这样的数组中

['on va mettre un premier texte', 'Puis un second texte']

请问我怎样才能得到这个结果？我无法在 Element ref 中找到子元素数组，我只有 NodeList 或 HTMLcollection

感谢您的帮助

Answer 1

您没有分享足够的代码让我知道发生了什么，但我的假设是您试图在内容可用之前深入研究内容(以找到 p 标签)。这是一个简单的演示，告诉您如何进行操作:

https://stackblitz.com/edit/angular-zeu51h?file=src%2Fapp%2Fapp.component.html

指令

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

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiveDirective implements OnInit{
  private readonly _elementRef: ElementRef;
  public items: string[];
  constructor(_el: ElementRef) {
    this._elementRef = _el;
  }
  ngOnInit(): void {
    const pTags = this._elementRef.nativeElement.querySelectorAll('p');
    this.items = [];
    if (pTags) {
      pTags.forEach( p => this.items.push(p.innerText));
      console.log(this.items);
    }
  }

}

使用

<div appMyDirective>
  <p>Start editing to see some magic happen :)</p>
  <p>Something else</p>
</div>