Angular 角度7-在视口中检测组件时

我有一个Angular 7中的应用程序，其中的一个组件有很多子组件。我遇到的问题是由于组件的数量，当应用程序在视图端口中完全加载时，会有轻微的延迟。因此，我试图显示一个加载轮，一旦所有组件都完全加载并处于视图中，加载轮就会消失

是否有一种方法可以检查组件是否已加载并在视图端口中显示，或者是否有一个事件可以说明

作为测试，我尝试了生命周期挂钩：

ngAfterViewInit(): void {
    alert('Component Loading complete');
  }

但不幸的是，此警报在组件实际位于视图端口之前显示

感谢任何指导和轻量级解决方案。谢谢

是否有方法检查或通过事件说明组件何时已加载并显示在视口中

触发ngAfterViewInit时，将创建所有视图组件

您可以使用查询来侦听对的更改

此查询只会告诉您DOM元素何时存在，而这可能不是移除加载轮的上下文。另一种方法是通过子组件通知父组件。例如从HTTP加载数据之后

@Component({
    ...
    template: `
        <div class="loading" *ngIf="!(loaded$ | async)"></div>
        <child-component></child-component>
    `
})
export class Parent Component {
     public loaded$: BehaviorSubject<boolean> = new BehaviorSubject(false);
}

@Component({...})
export class ChildComponent implements OnInit {
     public constructor(private _httpClient: HttpClient,
                        private _parent: ParentComponent) {}

     public ngOnInit() {
         this._httpClient.get('stuff').subscribe(() => {
             this._parent.loaded$.next(true);
         });
     }
}

---

您可以通过添加一个服务作为孩子的管理器来改进这种方法。这样子对象就不会直接耦合到父对象。这里的关键是使用Observable来发出有关子对象状态的更改。

不确定到底发生了什么，但您可以尝试一下“我们能看到模板标记吗？”ngAfterViewInit是正确的生命周期挂钩。我认为您正试图通过加载屏幕来补偿过度填充的DOM。使用虚拟化列表之类的方法来减少一次渲染的元素数量。唯一的延迟应该是网络延迟和初始引导延迟