angular - Angular2滚动到具有* ngIf的元素

我在Angular2中编写一个表单，用户在其中提交表单，表单将被验证，如果输入有任何错误，我希望将用户的浏览器滚动到第一个元素，并显示类“error”
问题是，我所有的错误都是这样使用*ngif：

<input type="text" [(ngModel)]="model.first_name">
<div class="error" *ngIf="errors.first_name">
    {{errors.first_name}}
</div>

在我的提交函数中

submit(){
   this.errors = this.validate();
   if(this.errors.any()){
      var errorDivs = document.getElementsByClassName("error");
      if(errorDivs.length > 0){
         errorDivs[0].scrollIntoView();
      }
   }
}

我意识到这是因为*ngif从dom中完全删除了div，而角度检查的更改还没有得到运行的机会。有没有聪明干净的方法？

最佳答案

我不太明白你的问题。
当errors.first_name变为truthy时，使用如下指令将使元素滚动到视图中：

<div class="error" *ngIf="errors.first_name" scrollTo>
    {{errors.first_name}}
</div>

@Directive({ selector: '[scrollTo]'})
class ScrollToDirective implements AfterViewInit {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    this.elRef.nativeElement.scrollIntoView();
  }
}

关于angular - Angular2滚动到具有* ngIf的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42819549/