是否有像 ngDoneCheck 这样的 Angular 事件？

Question

问题

我想知道当一个新元素被添加到它正在动态跟踪的数组中时，Angular 已经完成渲染 *ngFor 指令（编辑：），并且在 ngAfterViewInit 之后。

示例

我的问题的一个例子：我有一个包含 2 个东西的数组。使用 ngFor 将它们生成为内容可编辑的 p 标签。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <p 
      *ngFor="let el of myArray" 
       contenteditable="true"
       (keydown.enter)="addNewP()"
    >{{el}}</p>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myArray = ["first", "second"];
  addNewP(){
    this.myArray.splice(1, 0, "in the middle");
  }
}

如何在用户按下回车后获得 angular 已完成渲染的异步通知，以便我可以将焦点放在“中间”元素上？

我目前的解决方案

目前我正在使用来自https://www.codementor.io/yomateo/auto-focus-with-angular-7-the-directive-osfcl7rrv 的自定义指令：

import { Directive, ElementRef, AfterContentInit } from '@angular/core';

@Directive({
  selector: '[appFocusNew]'
})
export class FocusNewDirective implements AfterContentInit{

  constructor(private el: ElementRef//tiny side note: angular warns extensively against this, should i avoid it?
    ) { }

  public ngAfterContentInit() {
    setTimeout(() => {
      this.el.nativeElement.focus();
    },0)
  }
}

Answer 1

可以使用*ngFor提供的last值来完成

<div *ngFor="let item of arr; let lastReached = last">
    <div>{{ last ? myFunction() }}</div>
</div>

Answer 2

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from "@angular/core";
@Component({
  selector: "app-root",
  template: `
    <p
      #pList
      *ngFor="let el of myArray"
      contenteditable="true"
      (keydown.enter)="addNewP()"
    >
      {{ el }}
    </p>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChildren("pList") protected pList: QueryList<ElementRef>;

  myArray = ["first", "second"];
  addNewP() {
    this.myArray.splice(1, 0, "in the middle");
  }
  ngAfterViewInit() {
    this.pList.first.nativeElement.focus();
  }
}

Answer 3

您可以在指令中使用OnInit 生命周期挂钩。还要确保在模板中使用类似appFocusNew = "" 的指令。否则ngOnInit 可能不会被解雇。

指令：

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appFocusNew]'
})
export class FocusNewDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.focus();
  }

}

模板：

<p 
  *ngFor="let el of myArray" 
    contenteditable="true"
    (keydown.enter)="addNewP()"
    appFocusNew = ""> 
    {{el}}
</p> 

工作DEMO here.

Answer 4

您可以在组件link 中使用 ngAfterViewChecked。每次检查您的 html 更改时都会调用它。

这样，一旦你的数组被修改并且你的 html 发生了变化，ngAfterViewChecked 就会被调用，你就可以应用焦点了。

     export class AppComponent implements AfterViewChecked{
      myArray = ["first", "second"];
      ngAfterViewChecked(){
       // put focus here.
      }
    }