DOM更新后运行Angular指令代码

Question

我有一个指令用于聚焦第一个在表单中具有ng-invalid类的字段。这对我来说效果很好，但我们增加了以手风琴方式折叠表单某些部分的功能。问题是，现在表单中不可见的部分会停止表单提交，但是用户仍然会对错误的位置感到头疼。我已经尝试设置扩展折叠部分的属性，然后调用焦点，但在DOM更新和部分扩展之前调用焦点。

DOM更新后调用一段代码的Angular方法是什么？

@Directive({
  selector: '[focusFirstInvalid]'
})
export class FocusFirstInvalidDirective {
  @Output()
  submitOnValid: EventEmitter<any> = new EventEmitter();

  constructor() { }

  @HostListener('submit', ['$event'])
  onSubmit(event) {
    const elm = event.target;
    elm.classList.add('submitted');
    let invalid = elm.getElementsByClassName('ng-invalid');

    if (invalid.length) {
      invalid[0].focus();
    } else {
      this.submitOnValid.emit();
    }
  }
}