如何在 Angular 中渲染组件之前加载数据

Question

不会发生页面移动，因此您不使用路由器。 但是，当您单击特定元素时，会出现一个使用 Angular 的 mat 对话框创建的新窗口并显示数据。 此时，从服务器接收数据。 当前数据加载很慢，所以用户可以看到从初始值到服务器值的变化。

有没有办法在渲染组件之前获取数据？

Answer 1

通常，您可以做的一件事是创建组件但将其隐藏，以便当它显示时，数据已经加载。 使用 MatDialog 可能会很困难，因此您可能希望在主组件中预加载数据，然后在打开时将数据传递到 MatDialog（请参阅 MatDialog 的数据输入https://material.angular.io/components /dialog/api#MatDialogConfig )

例子：

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

Answer 2

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

Answer 3

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