如何在子组件发送EventEmitter且父组件ngIf条件为真时触发父组件方法？

问题原因 #

点击子组件后，父组件先把serviceActive设为true，但Angular不会立刻更新DOM——此时#service-view元素还没被渲染出来，第一次调用scrollIntoView找不到目标元素，滚动自然失效。第二次点击时DOM已经完成更新，元素存在，滚动才生效。

靠谱解决办法一：手动触发变更检测+延迟执行滚动 #

利用Angular的ChangeDetectorRef强制更新DOM，再延迟执行滚动确保元素完全渲染：

修改父组件的.ts代码：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // 保留你原有的组件元数据
})
export class ParentComponent {
  serviceActive!: boolean;

  constructor(private cdr: ChangeDetectorRef) {}

  scrollDown(evt: string) {
    this.onServiceActivated();
    // 手动触发变更检测，让Angular立即更新DOM
    this.cdr.detectChanges();
    // 延迟0毫秒执行，确保DOM渲染完成后再滚动
    setTimeout(() => {
      document.getElementById("service-view")?.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest"
      });
    }, 0);
  }

  onServiceActivated() {
    this.serviceActive = true;
  }
}

解决办法二：用ViewChild监听视图变更完成后滚动 #

通过模板引用变量获取目标元素，在视图更新完成的钩子函数中执行滚动：

先修改父组件的.ts代码：

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  // 保留原组件元数据
})
export class ParentComponent implements AfterViewChecked {
  serviceActive!: boolean;
  private needScroll = false;

  @ViewChild('serviceView') serviceView!: ElementRef;

  scrollDown(evt: string) {
    this.onServiceActivated();
    this.needScroll = true; // 标记需要执行滚动
  }

  onServiceActivated() {
    this.serviceActive = true;
  }

  ngAfterViewChecked() {
    // 当需要滚动且元素已存在时执行滚动
    if (this.needScroll && this.serviceView) {
      this.serviceView.nativeElement.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest"
      });
      this.needScroll = false; // 重置标记，避免重复滚动
    }
  }
}

再修改父组件的.html，将id替换为模板引用变量：

<app-services (service)="scrollDown($event)"></app-services>

<!--仅当serviceActive为true时显示-->
<div #serviceView *ngIf="serviceActive">
  <app-services-detail></app-services-detail>
</div>

简单解决办法三：替换*ngIf为[hidden] #

如果页面布局允许，用[hidden]替代*ngIf——元素会始终存在于DOM中（仅通过CSS隐藏），第一次点击就能直接触发滚动：

修改父组件的.html：

<app-services (service)="scrollDown($event)"></app-services>

<!--用[hidden]替代*ngIf-->
<div id="service-view" [hidden]="!serviceActive">
  <app-services-detail></app-services-detail>
</div>

父组件的.ts代码无需修改，因为元素一直存在，scrollIntoView能直接找到目标。

注意：[hidden]通过display: none隐藏元素，元素仍占据DOM位置；*ngIf是直接添加/移除DOM元素，需根据布局需求选择。

内容的提问来源于stack exchange，提问作者Murilo de Melo Reis