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>

自定义指令将子文本推入数组

1 个答案: