Angular中JS代码无法为Notes动态内容超链接应用高亮

实现接口返回内容的超链接高亮功能时，相同逻辑下Description区块超链接可正常高亮，Notes区块内的超链接无法生效。
相关实现代码：

import { AfterViewInit, Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-variable-notes-dialog',
  templateUrl: './variable-notes-dialog.component.html',
  styleUrls: ['./variable-notes-dialog.component.scss']
})
export class VariableNotesDialogComponent implements OnInit, AfterViewInit {

  variableNotes;
  pageTitle: string;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<VariableNotesDialogComponent>) {
    if(data) {
      this.variableNotes = data.variableNotes;
      this.pageTitle = data.pageTitle;
    }
   }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    const notes = document.getElementById('notes');
    const description = document.getElementById('description')
    // notes.innerHTML = this.variableNotes.notes? this.variableNotes.notes:  '--';
    this.variableNotes.notes ? notes.getElementsByTagName('p')[0].innerHTML = this.variableNotes.notes : notes.classList.add('hidden')
    description.innerHTML = this.variableNotes.description? this.variableNotes.description : '--';


    description.childNodes?.forEach(node => {
      if (node instanceof HTMLAnchorElement) {
        node.classList.add('font-bold', 'text-red-600')
      }
    })

    notes.childNodes?.forEach(node => {
      if (node instanceof HTMLAnchorElement) {
        node.classList.add('font-bold', 'text-red-600')
      }
    })
  }

  onClose() {
    this.dialogRef.close();
  }
}

问题复现效果：

两个区块逻辑效果不一致，完全是DOM遍历层级的问题：

• Description区块的内容是直接赋值给description容器本身的innerHTML，容器内的<a>标签是容器的直接子节点，遍历childNodes可以直接拿到锚点元素，样式添加正常。
• Notes区块的内容是赋值给notes容器内部第一个<p>标签的innerHTML，<a>标签是嵌套在<p>标签内的后代节点，你遍历notes.childNodes只能拿到直接子级的<p>元素，根本匹配不到内部的锚点，自然加不上高亮样式。

把原来遍历直接子节点的逻辑，替换为查找容器下所有后代锚点元素即可，修改ngAfterViewInit内的节点遍历部分：

ngAfterViewInit(): void {
  const notes = document.getElementById('notes');
  const description = document.getElementById('description')
  this.variableNotes.notes ? notes.getElementsByTagName('p')[0].innerHTML = this.variableNotes.notes : notes.classList.add('hidden')
  description.innerHTML = this.variableNotes.description? this.variableNotes.description : '--';

  // 查找description下所有a标签，不限制直接子级
  description.querySelectorAll('a')?.forEach(node => {
    node.classList.add('font-bold', 'text-red-600')
  })

  // 查找notes下所有嵌套的a标签
  notes.querySelectorAll('a')?.forEach(node => {
    node.classList.add('font-bold', 'text-red-600')
  })
}

修改后两个区块的超链接都可以正常命中高亮样式。

补充：Angular场景下更推荐用@ViewChild获取元素引用、配合DomSanitizer处理动态HTML的写法，尽量避免直接全局操作document对象，减少跨组件、视图变更时的DOM操作异常。

内容的提问来源于stack exchange，提问作者Jigyanshu