角度4を使用してParentから子DOM要素参照を取得する方法

Question

親要素から子要素のDOM参照を取得する必要がありますが、子要素DOMにアクセスできません。

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

からそれを削除します。

まず、あなたはそれがChildComponentする必要があります代わりにElementRefの、あなたの親コンポーネントで<child-component #childComp></child-component>

が必要になります。

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

お子様の場合：

@Component({ 
    selector: 'child-component', 
    templateUrl: './child.component.html' 
}) 
export class ChildComponent { 
    @ViewChild('tableBody') tableBody: ElementRef; 
} 

Answer 2

親コンポーネントからtableBodyを参照する必要があります。そこで彼child-componentに追加し、Sachila Ranawakaの答えに展開するにはtbody

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