如何在Angular中从绑定的innerHTML访问子级？

HTML如下所示：

而

someHtml

看起来是这样的：

publicsomehtml='
测试
另一个测试
'

我试图使用
ContentChildren
获取代码块，但返回的长度为0

@ContentChildren('code') public codeBlocks;

public ngAfterContentInit(): void {
    console.log(this.codeBlocks); // returns length of 0
}

如何获取通过innerHtml绑定到div的代码块的引用？HTML实际上是从后端API中提取的，我的目标是添加一个“副本”按钮到每个块。
如果您有可以有多个
code
元素，那么您应该使用
@ViewChildren
，对于单个
code
元素，您可以使用
@ViewChildren
如果您有可以有多个
code
元素，那么您应该使用
@ViewChildren
，对于单个
code
元素您可以使用
@ViewChild
我可以通过以下代码解决此问题：

import { Component, OnInit, ElementRef, ViewChild, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit, AfterViewInit {
  @ViewChild('codeWrap') public codeWrap: ElementRef;

  public someCode = '<code>hi</code><p>blah</p><code>test</code><p>blah</p><code>test</code>';

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnInit() {
  }

  public ngAfterViewInit(): void {
    const codeBlocks: HTMLCollection = this.codeWrap.nativeElement.getElementsByTagName('code');

    Array.from(codeBlocks)
      .forEach((codeBlock): void => {
        const button = this.renderer.createElement('button');
        const text = this.renderer.createText('copy');
        const wrap = this.renderer.createElement('div');
        const parent = codeBlock.parentNode;

        // set wrap position to relative
        this.renderer.setStyle(wrap, 'position', 'relative');

        // set button styles
        this.renderer.appendChild(button, text);
        this.renderer.setStyle(button, 'position', 'absolute');
        this.renderer.setStyle(button, 'top', '0');
        this.renderer.setStyle(button, 'right', '0');

        // listen for button click event
        this.renderer.listen(button, 'click', (ev) => {
          const codeToCopy = codeBlock.innerHTML;

          console.log(codeToCopy);
        });

        // insert elements
        this.renderer.insertBefore(parent, wrap, codeBlock);
        this.renderer.appendChild(wrap, button);
      });
  }
}

我可以通过以下代码解决此问题：

import { Component, OnInit, ElementRef, ViewChild, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit, AfterViewInit {
  @ViewChild('codeWrap') public codeWrap: ElementRef;

  public someCode = '<code>hi</code><p>blah</p><code>test</code><p>blah</p><code>test</code>';

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnInit() {
  }

  public ngAfterViewInit(): void {
    const codeBlocks: HTMLCollection = this.codeWrap.nativeElement.getElementsByTagName('code');

    Array.from(codeBlocks)
      .forEach((codeBlock): void => {
        const button = this.renderer.createElement('button');
        const text = this.renderer.createText('copy');
        const wrap = this.renderer.createElement('div');
        const parent = codeBlock.parentNode;

        // set wrap position to relative
        this.renderer.setStyle(wrap, 'position', 'relative');

        // set button styles
        this.renderer.appendChild(button, text);
        this.renderer.setStyle(button, 'position', 'absolute');
        this.renderer.setStyle(button, 'top', '0');
        this.renderer.setStyle(button, 'right', '0');

        // listen for button click event
        this.renderer.listen(button, 'click', (ev) => {
          const codeToCopy = codeBlock.innerHTML;

          console.log(codeToCopy);
        });

        // insert elements
        this.renderer.insertBefore(parent, wrap, codeBlock);
        this.renderer.appendChild(wrap, button);
      });
  }
}

ngAfterContentInit
适用于使用
ng Content
/
ng slot
的内容投影。使用
ngAfterViewInit
应该可以工作。还可以将查询更改为使用
ViewChild
查询呈现的html

@ViewChild('code') public codeBlocks;

ngAfterContentInit
适用于使用
ng Content
/
ng slot
的内容投影。使用
ngAfterViewInit
应该可以工作。还可以将查询更改为使用
ViewChild
查询呈现的html

@ViewChild('code') public codeBlocks;

我能够使用
ViewChild
获取元素引用，然后访问
ViewChild.nativeElement.children
-这是正确的方法吗？我能够使用
ViewChild
获取元素引用，然后访问
ViewChild.nativeElement.children
-这是正确的方法吗方法？
@ViewChildren（'code'）公共代码块：QueryList
返回长度为0的元素，我认为这是因为HTML实际上绑定到容器的
innerHtml
，因为HTML是从后端API提取的。API中的数据可能包含多个
元素。对，
innerHtml
不是Angular编译的代码，因此Angular不会意识到它。您只能在这种情况下使用纯html
@ViewChildren（'code'）公共代码块：QueryList
返回长度为0的元素，我认为这是因为HTML实际上绑定到容器的
innerHtml
，因为HTML是从后端API提取的。API中的数据可能包含多个
元素。对，
innerHtml
不是Angular编译的代码，因此Angular不会意识到。您只能在这种情况下使用纯html