javascript - Angular 7 SSR，应用组件 ngOnInit() 多次调用

Question

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

ngOnInit()在我输入日志后，app.component.ts我发现日志正在打印多次，但它只发生在浏览器上的服务器端渲染上，它只呈现一次。

知道为什么ngOnInit()不止一次打电话吗？

Answer 1

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

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

Answer 2

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

在组件本身中添加该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());
}

我希望这有帮助。

Answer 3

ngOnInit() 只在所有指令实例化后挂钩一次。如果您在 ngOnInit() 中有订阅并且没有取消订阅，那么如果订阅的数据发生更改，它将再次运行。在您的情况下，通过服务器端的 SSR 加载 API 调用时，服务器并不总是等待响应的到来，这可能是多个日志的原因。一个建议是使用 isPlatformBrowser 将其委托给客户端。根据对一般 SSR 流程的调查，这就是我的看法。