how to load the data before the component is rendered in the Angular

Question

The page movement does not occur, so you do not use the router. However, when you click on a particular element, a new window created with the mat dialog of the Angular appears and shows the data. At this time, the data is received from the server. The current data load is slow, so the user can see the change from the initial value to the value from the server.

Is there a way to get the data before the component is rendered?

Answer 1

Usually, one thing you can do is create the component but keep it hidden so that when it does get shown, the data is already loaded. That may be difficult with a MatDialog so you might want to pre-load the data in your main component and then pass the data into your MatDialog when it opens (see the data input for MatDialog https://material.angular.io/components/dialog/api#MatDialogConfig )

Example:

this.dialog.open(YourComponent, {
  data: {
    someText: "Hello world",
    someData: {id: 1}
  }
});

Answer 2

只是想提供帮助，我不是角度专家，但研究角度生命周期将是解决这个问题的一个很好的开始，这不仅可以帮助您解决这个问题，还可以帮助您正确利用角度。

Answer 3

如果您使用 Observables 从服务器获取数据，您不能在组件的 ngOnInit 上手动订阅组件，您可以只使用异步管道在模板中获取和显示数据