如何使用 Angular 4 从 Parent 获取子 DOM 元素引用

Posted 2023-02-22

【中文标题】如何使用 Angular 4 从 Parent 获取子 DOM 元素引用

【英文标题】：How to get the child DOM element reference from Parent using angular 4

【发布时间】：2018-05-29 07:02:04

【问题描述】：

我需要使用 Angular 4 从父组件获取子组件 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> 

【参考方案1】：

要扩展 Sachila Ranawaka 的答案：

首先你需要<child-component #childComp></child-component>

在你的父组件中，应该是ElementRef，而不是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);
  

对于您的子组件：

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

【参考方案2】：

除了 Sachila 和 penleychan 的好答案之外，您还可以通过组件名称引用带有 @ViewChild 的组件：

parent.component.html

<!-- You don't need to template reference variable on component -->   
<child-component></child-component> 

然后在 parent.component.ts 中

import  ChildComponent  from './child-component-path';

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

【参考方案3】：

需要从父组件引用tableBody。所以将其添加到child-component 并从tbody 中删除

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

【讨论】：

这将允许访问子组件而不是作为子组件一部分的表体

@thilagabala 这个答案没有错，只是不完整。

@12seconds，如果我错了，请纠正我，如果我可以做上面的代码，我可以得到子组件方法和绑定值而不是 DOM。

@thilagabala 检查我的答案，认为它回答了你的问题。