如何仅在从孩子和父母的 ngIf 条件为真发送事件发射器后才触发父母的方法？

Question

当子模板中的元素被点击时，方法

activateService(name)

被执行并触发事件发射器

serviceSelected

（别名'service'），将通过选择器点击的元素的名称传递给父方法

scrollDown(name) 

.

scrollDown(name)

将父属性

serviceActive

设置为

true

并且应该向下滚动到父模板中带有

id='service-view'

的元素。现在的问题是，我必须点击子元素两次，直到触发父元素的向下滚动效果。似乎当孩子的值传递给父级时，父级模板中的元素还不可见。但是我不知道如何设置仅在

activeService

值设置为 true 后，即父元素可见后才触发向下滚动方法。有谁知道如何解决这个问题？

孩子：

.ts:

@Output('service') serviceSelected = new EventEmitter<string>();

activateService(service: string) {
   this.serviceSelected.next(service);
}

.html:

<div class="service" (click)="activateService('service1')">...</div>

家长：

.ts:

serviceActive!: boolean;

scrollDown(evt: string) {
   this.onServiceActivated();
   document.getElementById("service-view")?.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
   });
}

onServiceActivated() {
   this.serviceActive = true;
}

.html:

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

<!--Display only if serviceActive is true-->
<div id="service-view" *ngIf="serviceActive">
   <app-services-detail></app-services-detail>
</div>

Answer 1

在setTimeout中编写滚动元素代码如下：

    scrollDown(evt: string) {
     this.onServiceActivated();
     setTimeoUT(()=>{
      document.getElementById("service-view")?.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
      });
     })
   }

它会增加一点延迟，以便元素在 DOM 中可见并且滚动脚本将起作用。

Answer 2

你试过了吗？

父母

html

：

<div id="service-view" *ngIf="serviceActive">
   <app-services-detail #serviceView></app-services-detail>
</div>

父母

ts

：

@ViewhChildren("serviceView") serviceViews:QueryList<ElementRef<HTMLelement>>;

   ...

scrollDown(evt: string) {

  this.onServiceActivated();

}
   ...

ngAfterViewInit () {

   this.serviceViews.changes.pipe(
     filter( list => !!list.first ),
     tap( list => {

       list.first.nativeElement.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest"
       });

     } )
   ).subscribe();

 }