Как получить атрибуты DOM Node в Angular

Question

Я использую этот ответ для преобразования строки HTML в элементы DOM в Angular.

Проблема в том, что я не могу получить атрибуты Node.getAttribute() нельзя использовать, так как машинопись будет жаловаться, что No property getAttribute on Node.

Код приведен ниже (упрощенно).

import { AfterViewInit, Renderer2 } from '@angular/core';

export class MockComponent implements AfterViewInit {
  constructor(private renderer: Renderer2) {}

  private mockString = '<a href="#test1">test 1</a>'

  ngAfterViewInit(): void {
    const template = this.renderer.createElement('template');
    template.innerHTML = this.mockString.trim();
    const anchorNodes: NodeList = template.content.querySelectorAll('a');
    const anchors: Node[] = Array.from(anchorNodes);
    for (const anchor of anchors) {
      // how to get attributes of anchor here?
      // anchor.getAttribute('href') will be complained
    }
  }
}

Answer 1

TypeScript вид API. На данный момент нельзя сказать, что тип foo.parentNode зависит от типа foo. В настоящее время предполагается, что он всегда имеет тип Node, и Node не содержит API querySelector (доступен для Element)

FIX

Use a type assertion as shown:

Вместо:

anchor.getAttribute('href')

Использование:

(<Element>anchor).getAttribute('href')

Answer 2

Вместо этого вы можете использовать интерфейс NodeListOf.

const anchorNodes: NodeListOf<HTMLAnchorElement> = template.content.querySelectorAll('a');
const anchors: HTMLAnchorElement[] = Array.from(anchorNodes);

Answer 3

Вы можете установить свойство anchors как массив любого

const anchors: any[] = Array.from(anchorNodes);

, и не должно ли это быть массивом Noedlist, так как ваш код ссылается на код в предыдущей строке -

const anchors: NodeList [] = Array.from(anchorNodes);