web-dev-qa-db-ja.com

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

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>
angularangular-components
6
Jeyabalan Thavamani

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;
}
9
penleychan

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
oneberenjena

親コンポーネントからtableBodyを参照する必要があります。だから彼にそれを追加するchild-componentそしてそれをtbodyから削除します

<child-component #tableBody></child-component>
0
Sachila Ranawaka