ViewChild html отображается как innerHtml - PullRequest
Новая
       32

ViewChild html отображается как innerHtml

0 голосов
/ 05 марта 2020

Я хотел бы получить доступ к элементу с ViewChild, который отображается с внутренним Html, но в хуке жизненного цикла AfterViewInit, запись возврата элемента не определена.

Ниже приведен код, используемый: 

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
  }
}

Вопрос в том, как я могу получить доступ к <ng-template></ng-template> с помощью ViewChild или другим способом?

Приветствия

РЕДАКТИРОВАТЬ:

Вот блик стека, показывающий вопрос. https://stackblitz.com/edit/angular-k1xeh6?file=src%2Fapp%2Fapp.component.ts

РЕДАКТИРОВАТЬ 2:

В стеке я очистил html, если это не сделано, идентификаторы удалены.

Ответы [ 3 ]

0 голосов
/ 05 марта 2020

Попробуйте это, если вы хотите иметь ссылку на 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
  }
}

И используйте это, если вы хотите сослаться на внутренний HTML без изменения шаблона 

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
  }
}
0 голосов
/ 10 марта 2020

Ответ на вопрос: , а не . Angular не предназначен для такой работы.

Это частичный ответ из потока вопросов angular.

Когда вы вставляете строку HTML через внутренняя HTML, такая строка не обрабатывается Angular. Таким образом, вы не можете ожидать, что какой-либо синтаксис / функциональность Angular (включая запросы) будет работать - проще говоря, Angular не имеет шансов на обработку stati c HTML, вставленного во внутренний HTML. В этом отношении наблюдаемое поведение «работает как задумано».

Я не уверен, каков ваш точный, функциональный вариант использования, но сценарий, который вы раскрыли, не является чем-то таким, что Angular поддерживает сегодня и, честно говоря, это не совсем то, что было задумано.

Github выпуск: https://github.com/angular/angular/issues/35874

0 голосов
/ 05 марта 2020

Попробуйте указать тип для Viewchild (попробуйте код ниже) 

  @ViewChild('innerHtmlNgTemplate') innerHtmlNgTemplate: ElementRef;
...