Angular 5：从组件访问元素内部 html 以获取动态生成的元素

Posted 2023-03-13

【中文标题】Angular 5：从组件访问元素内部 html 以获取动态生成的元素

【英文标题】：Angular 5: Access element inner html from the component for dynamically generated elements

【发布时间】：2019-01-10 05:55:57

【问题描述】：

我的组件中有一个角度组件，我需要访问元素的内部 html。为此，我可以使用带有模板参考的 ViewChild 为单个元素获取此信息。但是在 ngFor 中，当我动态生成元素和模板引用时，它不起作用。 这是控制台中显示的错误：-

Cannot read property 'native Element' of undefined

这里是单个元素的代码：-

@ViewChild('emailBodyContainer') emailBodyContainer: ElementRef;
<div [innerHtml]="emailTemplate.mailBody" #emailBodyContainer>

对于动态元素：-

<div *ngFor="let i of reminderTemplates" class="container tab-pane text-center py-4 [innerHtml]="i.mailBody" #i.type></div>

请帮我解决这个问题。 在此先感谢:)

【参考方案1】：

试试这样的：

DEMO

<div *ngFor="let i of arr;let j = index" id=itemj>
    i
</div>

TS：

  import  Component, AfterViewInit  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements AfterViewInit 

  arr: Array<any> = [1, 2, 3, 4]

  ngAfterViewInit() 
    let data1 = document.getElementById('item0')
    let data2 = document.getElementById('item1')
    let data3 = document.getElementById('item2')
    let data4 = document.getElementById('item3')
    console.log(data1)
    console.log(data2)
    console.log(data3)
    console.log(data4)
  

对于 Mat-Tab：

DEMO

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

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements AfterViewInit 
  @ViewChild("main") main: ElementRef;

  name = 'Angular';
  Tabs: Array<any> = [ name: 'Tab1' ,  name: 'Tab2' ,  name: 'Tab3' ]

  ngAfterViewInit() 
    let el = document.getElementById("main");


    console.log(el);

    let elh = el.children.item(0).children.item(1).children.item(0).children.item(0).children;

    elh.item(0).setAttribute("style", "color:red;")

    elh.item(1).setAttribute("style", "color:green;")

    elh.item(2).setAttribute("style", "color:cyan;")
  

HTML：

<mat-tab-group id = "main">
    <mat-tab *ngFor="let tab Of Tabs;let i= index" [label]="tab.name"> Content i </mat-tab>
</mat-tab-group>

【讨论】：

它已经适用于单个组件。但是动态生成的元素有问题。

见上面的演示。

它对我不起作用。为了您的信息，我在 MatTab 中使用了 ngfor。

感谢您的回答。我的问题解决了。我的问题是当前选择的标签。

【参考方案2】：

You can use something like this.

<div *ngFor="let i of reminderTemplates" class="container tab-pane text-center py-4 [innerHtml]="i.mailBody" #items></div>

In component:

@ViewChildren('items') items: QueryList<ElementRef>;

console.log(this.items); // print the list of items

【讨论】：

感谢您的回复。它适用于您的情况，但不适用于：- this.items.forEach(item => console.log(item.nativeElement.innerHTML); );

HI Suresh，您有以上问题的解决方案吗？

请检查您的代码？它有效吗？它不适合我。