Question

我有一个大约30个模块的angular 7应用程序。我正在app.component.ts中获取用户详细信息以在整个应用程序中使用它，但是突然我发现用户详细信息API在1次加载时运行了多次。

将日志放入ngOnInit()的{{1}}中后，我发现日志可以打印多次，但是仅在服务器端的浏览器上才发生，它只渲染一次。

知道为什么app.component.ts会多次通话吗？

Answer 1

Angular SSR的概念是在第一次加载页面/ URL时，它会通过服务器呈现，然后在客户端传输数据。因此从技术上讲，它会调用所有组件，服务在该页面/ URL上存在两次。

您可以使用条件isPlatformBrowser和isPlatformServer方法，因此只能在服务器端呈现所需的部分。我们仅在SSR上呈现与SEO优化相关的特定内容。

Answer 2

实例化所有指令后，ngOnInit（）仅挂接一次。如果您在ngOnInit（）中拥有订阅，并且尚未取消订阅，那么如果订阅的数据发生更改，它将再次运行。在您通过服务器端通过SSR加载API调用的情况下，服务器不一定总是等待响应出现，这可能是多个日志的原因。一个建议是使用isPlatformBrowser在客户端上委托它。根据对一般SSR流程的调查，这对我来说就是这样。

Answer 3

我不确定这是否解决，但这是一个建议：

在组件本身中添加subscribe部分，并将其从进行HTTP调用的函数中删除：

ngOnInit() {
    this.loadData();
}

loadData(){
    this.my_service.getData().subscribe(data => this.userDetails = data);
}

在您的服务中，您可以进行简单的HTTP调用：

getData() {
    return this.http.get('../your/url')
           .map((res:Response) => res.json());
}

我希望这会有所帮助。

Angular 7 SSR，多次调用应用程序组件ngOnInit（）

3 个答案: