Question

有一个组件：

<my-component></my-component>

它的组件以@Input的形式接收数字流

<my-component [data]="numbers$ | async"></my-component>

在组件内部，我们更新了模型：

@Component({...})
class MyComponent {

  numbers: number[] = [];

  @Input
  set data(numbers: number[]) {
      this.numbers = numbers;
  }

  constructor() {}

  myCallback() { }
}

然后呈现数字列表，如下所示：

<ul>
 <li *ngFor="number of numbers">{{number}}</li>
</ul>

如何检测到*ngFor已呈现所有元素？以及在元素添加到DOM后如何调用回调函数myCallback？

Answer 1

您可以使用ViewChildren从视图DOM获取元素或指令的QueryList。每当添加，删除或移动子元素时，查询列表都会被更新，并且查询列表中可观察到的更改将发出新值。

import { Component, OnInit, Input, ViewChildren, QueryList } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {

  numbers: number[] = [];
  @ViewChildren('li') elements: QueryList<any>;

  @Input() set data(numbers: number[]) {
    this.numbers = numbers;
  }

  ngAfterViewInit() {
    this.elements.changes.subscribe(li => {
      li.forEach(elm => this.myCallback(elm.nativeElement))
    })
  }

  myCallback(elm) {
    console.log(elm)
  }

}

模板

<ul>
    <li #li *ngFor="let n of numbers">
        {{n}}
    </li>
</ul>

myCallback将记录每个元素，但您仍然有权访问所有元素

stackblitz demo

ViewChildren

Answer 2

这发生在NgInit

https://angular.io/guide/lifecycle-hooks

ngOnInit（）
  在Angular首先显示数据绑定属性并设置指令/组件的输入属性之后，初始化指令/组件。

在第一个ngOnChanges（）之后调用一次。

更新：

我可能误会了你的问题。您没有ngFor的任何更新。你的用例是什么？也许有不同的解决方案。

Answer 3

您可以创建一个指令来检测向dom的elemntmrender并在那时运行方法

import { Directive , Output ,EventEmitter } from '@angular/core';

@Directive({
  selector: '[rendered]'
})
export class RenderedDirective {

   @Output() rendered:EventEmitter<any> = new EventEmitter();

   ngAfterViewInit() {
     this.rendered.emit()
   }

}

ngAfterViewInit将在Angular完全初始化a并显示为
后调用

MyComponent

export class MyComponentComponent {

  numbers: number[] = [];

  @Input() set data(numbers: number[]) {
    this.numbers = numbers;
  }

  myCallback(elm) {
    console.log(elm)
  }

}

模板

<ul>
    <li #li *ngFor="let n of numbers" (rendered)="myCallback(li)">
        {{n}}
    </li>
</ul>

stackblitz demo

如何检测Angular何时将元素附加到DOM？

3 个答案: