Question

这个问题似乎被广泛讨论，但我找不到如何正确实施。

我在Component中有两个可以并行运行的方法，所以我现在有一个计时问题。如何使用observable（或promise）来确保在onCollapse（）之后运行ngAfterViewChecked（）？

组件

@Component
export class MyClass implements AfterViewChecked{
    ngAfterViewChecked() {
        ...
    }

    onCollapse(index: number) {
        ...
    }
}

HTML

<div class="collapse_section" *ngFor="let event of event_role; let i = index" #jobBody>
    <header accordion-heading (click)="onCollapse(i)" [attr.aria-expanded]="!isCollapsed">
        ...
    </header>
</div>

更新1 要明确我在这里做的事情：

这个想法是当用户点击时，onCollapse被调用并且某些div变得可见，但它可能在屏幕外。然后为了让它出现在屏幕上，我想在ngAfterViewChecked调用中滚动。我无法在onCollapse（）中滚动，因为视图未在此处理程序范围内更新。

更新2

可能我根本不需要ngAfterViewChecked，它可能是其他方法。我只是想将窗口滚动到底部，一旦所有DOM操作都由点击完成引起。是否可以使用Observable和（click）事件处理程序？

Answer 1

ngAfterViewChecked（）做了哪些工作？如果它执行一些返回promise的异步调用，你可以这样做：

ngAfterViewChecked() {
this.someAsynchronousCall()
.then(() => this.onCollapse(index));
}

如果您的异步调用返回一个observable，那么您可以这样做，

ngAfterViewChecked() {
this.someAsynchronousCallThatReturnsObservable()
.toPromise()
.then(() => this.onCollapse(index));
}

角。如何使用observable？

1 个答案: