Question

我需要在parent-child component之间进行通信，该通信是通过@Input属性和子组件中的onChanges()方法实现的。 但是，我需要访问无法访问的新更改/创建的HTML元素。

我正在创建新元素。 <h1 id={{id}}> </h1>

中的按钮事件上的parent component

我已经在onChanges()中实现了child component生命周期挂钩。

但是，如果我在子组件中执行null，它将返回document.getElementbyId(id)

ParentComponent.ts

export class ParentComponent {
  public ele: number[] = [1, 2, 3, 4];

  public changeElement() {
    this.ele = [5, 6, 7, 8];
  }
}

ParentComponent.html

<p>parent works!</p>
<div *ngFor="let i of ele">
    <h1 id={{i}}>{{i}}</h1> **<-- Here I am generating ele. with id.**
</div>
<app-child [ele]="ele"></app-child>
<button (click)="changeElement()">change Element</button>

我猜这是需要ngOnChanges()方法增强的文件。为简单起见，我没有使用语义手段制作了这个示例。

但是，我确定我需要访问ts file本身中的HTML DOM元素以进行操作

ChildComponent.ts

export class ChildComponent implements AfterViewInit, OnChanges {
  @Input() public ele: number[] = new Array();

  public ngAfterViewInit() {
    for (let e of this.ele) {
      // this work perfect initially, because of ngAfterViewInit() hook
      console.log(document.getElementById(e.toString()));
    }
  }

  public ngOnChanges() {
    for (let e of this.ele) {
      // here I got latest values 
      // But I want to access generated ele, that gives null
      // How should I wait till view rendered onChanges()
      console.log(document.getElementById(e.toString()));
    }
  }

}

Answer 1

这是解决方案，只需在其上添加一个条件，如下所示：

 public ngOnChanges() {
if(this.ele){
    for (let e of this.ele) {
      // here I got latest values 
      // But I want to access generated ele, that gives null
      // How should I wait till view rendered onChanges()
      console.log(e.toString());
    }
}
  }

对我有用

Angular：如何从父组件访问子组件中创建的DOM元素

1 个答案: