javascript - 需要加载 innerHTML 然后运行函数

Question

我试图在 ngOnInit 上调用此 highlight() 但我收到此错误:错误类型错误:无法读取 null 的属性“innerHTML” 。

在 ngOninit 我有

this.annotationSub = this.annotationService
      .getWordUpdateListenerTwo()
      .subscribe((theHardWords: ComplexWord[]) => {
        this.thewords = [];
        this.theHardWords = theHardWords;
        this.theHardWords.map(word => {
          this.thewords.push(word.word);
          this.wordWithAnnotation.push(word);
        });
      });

this.postsSub = this.postsService
     .getPostUpdateListenerTwo()
     .subscribe((posts: Post[]) => {
            this.posts = posts;
            this.posts.map(post => {
              if (post.id === this.id) {
                 this.postIWant = post.fileText;
              }
            });
    });
    this.highlight(this.thewords); 

这会挑选出帖子，然后显示如下:

我的 HTML:

<div id="scrollable">
    {{ postIWant }}
</div>

这是给我带来问题的 highlight 函数，如果我在文档加载按钮后调用此 highlight 函数，它工作正常，但如果我在 ngOnInit 中调用它，它没有为 innerHTML 提供足够的时间来填充，因此会引发错误。

我已经尝试使用 ngAfterViewInit(): void {} 但即使那样也没有给它足够的时间。下面是 highlight 函数。

highlight(words) {
    const high = document.getElementById('scrollable');
    const paragraph = high.innerHTML.split(' ');
    const res = [];

    paragraph.map(word => {
      let t = word;
      if (words.indexOf(word) > -1) {
        t =
          '<a class="clickable" style="background-color: yellow; text-decoration: underline;">' +
          word +
          '</a>';
      }
      res.push(t);
    });
    high.innerHTML = res.join(' ');
    const elementsToMakeClickable = document.getElementsByClassName(
      'clickable'
    );
    const elementsToMakeClickableArray = Array.from(elementsToMakeClickable);
    elementsToMakeClickableArray.map(element => {
      element.addEventListener('click', this.viewAnnotation.bind(this));
    });
    document.getElementById('btnHighLight').style.visibility = 'visible';
}

如前所述，如果我加载页面并按下按钮触发 highlight() 它会工作，但我希望它运行该功能并突出显示无需我点击任何内容。有人有什么想法吗？谢谢!

(我正在使用 Angular)。

Answer 1

您的 document.getElementById('scrollable'); 调用返回 null。

这就是为什么您不应该在 Angular 中与 DOM 交互。 Angular 将它完全解耦，并为您提供一个 API 来与之交互。

ngOnInit 在解析组件的 Input 和 Outputs 后调用。 ngAfterViewInit 在附加 View 模板并解析模板变量后调用。

一旦组件的标记附加到 DOM，Angular 中就不会触发生命周期 Hook 。

有很多方法可以通过 Angular 而不是通过 DOM 查询获取元素，但这里没有必要。

只需将其绑定(bind)在标记中即可:

组件.html:

<div id="scrollable">
  <a class="clickable inline-styling-is-bad" style="background-color: yellow; text-decoration: underline;">
    {{ postIWant }} 
  </a>
</div>

如果您需要基于数组的一系列重复元素...这似乎很明显，但只需使用 *ngFor。

您的 Observable 流也有一些问题，但这超出了本主题的范围。