html 上的 ViewChild 呈现为 innerHtml

Question

我想访问使用 innerHtml 呈现的 ViewChild 元素，但在生命周期挂钩 AfterViewInit 中，记录元素 return 未定义。

下面是使用的代码：

import { Component, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core';

@Component({
  template: `<p [innerHTML]="'<ng-template #innerHtmlNgTemplate></ng-template>' | safeHtml"></p>`
})
export class AppComponent {
  @ViewChild('innerHtmlNgTemplate') public innerHtmlNgTemplate;

  ngAfterViewInit() {
      console.log(this.innerHtmlNgTemplate); // undefined
  }
}

问题是如何使用 ViewChild 或其他方式访问 <ng-template></ng-template>？

干杯

编辑：

这是一个显示问题的堆栈闪电战。 https://stackblitz.com/edit/angular-k1xeh6?file=src%2Fapp%2Fapp.component.ts

编辑 2：

在 stackblitz 中，我清理了 html，如果不这样做，id 将被删除。

Answer 1

尝试为 Viewchild 指定类型（尝试以下代码）

  @ViewChild('innerHtmlNgTemplate') innerHtmlNgTemplate: ElementRef;

Answer 2

如果你想引用 ng-template，试试这个

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

@Component({
  selector: 'app-component',
  template: `<p  
  [innerHTML]="'This is the innerhtml, and the following tag I want to select with ViewChild: '" >
     <ng-template #innerHtmlNgTemplate></ng-template>
  </p>

 `
})
export class AppComponent {
  @ViewChild('innerHtmlNgTemplate', {static: true}) public innerHtmlNgTemplate;

  ngAfterViewInit() {
      console.log(this.innerHtmlNgTemplate); // find value
  }
}

如果您想在不更改模板的情况下引用 innerHTML，请使用它

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

@Component({
  selector: 'app-component',
  template: `<p  #innerHtmlNgTemplate
  [innerHTML]="'This is the innerhtml, and the following tag I want to select with ViewChild: <ng-template ></ng-template>'"></p>`
})
export class AppComponent {
  @ViewChild('innerHtmlNgTemplate', {static: true}) public innerHtmlNgTemplate;

  ngAfterViewInit() {
      console.log(this.innerHtmlNgTemplate.nativeElement.innerHTML); // prints innerhtml
  }
}

Answer 3

问题的答案是你应该不这样做。 Angular 并非设计为以这种方式工作。

这是 angular 问题线程的部分响应。

当您通过 innerHTML 插入 HTML 字符串时，这样的字符串不会被 Angular 处理。因此，您不能期望任何 Angular 语法/功能（包括查询）起作用 - 简单地说 Angular 没有机会处理插入到内部 HTML 中的静态 HTML。在这方面观察到的行为 "works as designed".

我不确定你的确切功能用例是什么，但你所公开的场景不是 Angular 今天支持的，老实说，这不是它是最初设计的。

Github 问题：https://github.com/angular/angular/issues/35874

html 上的 ViewChild 呈现为 innerHtml

ViewChild on html rendered as innerHtml

angular

viewchild