Question

我在Angular 7中有一个带有许多子组件的组件的应用程序。我遇到的问题是由于组件的数量，当应用程序在视口中完全加载时，会有一些滞后。因此，我试图显示一个加载轮，一旦所有组件都完全加载并可见，该轮便消失了。

是否有一种方法可以检查或说出一个组件何时已加载并在视口中显示的事件？

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

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

但是不幸的是，此警报在组件实际进入视口之前显示。

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

Answer 1

是否有一种方法可以检查或说出一个组件何时在视口中加载并显示的事件？

在触发ngAfterViewInit()时创建所有视图组件。

您可以使用查询来监听对ViewChildren的更改。

https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e?gi=e81ee3df6cab

此查询只会告诉您DOM元素何时存在，而这可能不是删除加载轮的 context 。另一种方法是通过 child 组件通知 parent 组件。例如;从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);
         });
     }
}

您可以通过添加 service 作为孩子的管理者来改进此方法。这样孩子就不会直接耦合到父母。这里的关键是使用可观察变量来发出有关孩子状态的更改。

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

1 个答案: