So erhalten Sie die untergeordnete DOM-Element Referenz von Parent mit eckigen 4

Question

Ich muss die DOM-Referenz der untergeordneten Komponente von eckigen 4, aber ich kann nicht auf Child-Komponente DOM zugreifen, bitte mich, wie dies zu erreichen.

parent.component.html

<child-component></child-component> 

parent.component.ts

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

@Component({ 
    selector: 'parent-component', 
    templateUrl: './parent.component.html' 
}) 
export class ParentComponent implements AfterViewInit { 
    @ViewChild('tableBody') tableBody: ElementRef; 
    constructor(){ 
    console.log(this.tableBody);//undefined 
    } 
    ngAfterViewInit() { 
     console.log(this.tableBody);//undefined 
    } 
} 

child.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'child-component', 
    templateUrl: './child.component.html' 
}) 
export class ChildComponent { 
} 

child.component.html

<div> 
     <table border="1"> 
     <th>Name</th> 
     <th>Age</th> 
     <tbody #tableBody> 
     <tr> 
     <td>ABCD</td> 
      <td>12</td> 
     </tr>   
     </tbody> 
     </table> 
</div> 

Answer 1

auf Antwort Sachila Ranawaka zu erweitern:

Zuerst müssen Sie <child-component #childComp></child-component>

In Ihrer Stammkomponente, statt ElementRef sollte es sein ChildComponent:

@Component({ 
    selector: 'parent-component', 
    templateUrl: './parent.component.html' 
}) 
export class ParentComponent implements AfterViewInit { 
    @ViewChild('childComp') childComp: ChildComponent; 
    constructor(){ 
    } 
    ngAfterViewInit() { 
    console.log(this.childComp.tableBody); 
    } 
} 

Für Ihre Kindkomponente:

Answer 2

Sie müssen die tableBody von der übergeordneten Komponente referenzieren. So fügen Sie es ihm child-component und entfernt sie aus tbody

<child-component #tableBody></child-component>