在 Angular SSR 中重定向到外部 URL答案

【问题标题】：Redircting to an external Url in Angular SSR在 Angular SSR 中重定向到外部 URL
【发布时间】：2018-06-24 04:16:52
【问题描述】：

在 Angular 2+ 中，重定向到外部 URL 的唯一方法是使用 window.location.href = '...';。

How to redirect to an external URL in Angular2

但是，当 Angular 在 SSR 模式下运行时，会出现以下错误。

ERROR ReferenceError: window is not defined

在页面的服务器端渲染期间，无论如何我可以避免这个错误。

【问题讨论】：

如果您使用来尝试与 url 进行数据绑定，这也是一个问题。它将该 url 附加到 angular 应用程序 url 上，就像您使用路由器一样。对如何使用内联模板解决此类问题感兴趣

标签： angular server-side-rendering angular-universal

【解决方案1】：

您需要从服务器向您的 Angular 应用程序发送一个您将在 Angular 代码中修改的对象

例如，在您的服务器代码中注入一个额外的参数，如果您需要重定向，它将在 Angular 应用程序中进行修改。

 let respData = {redirectUrl: ''};
//....
 extraProviders: [
 {
    provide: 'httpResponseData',
    useValue: respData,
  }

在 Angular 应用程序中，在要指定重定向 url 的组件/服务的构造函数中注入该额外参数

constructor(@Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('httpResponseData') private httpResponseData: any)
{
//...
}

当你想重定向时，使用新参数而不是窗口对象

redirect(url: string)
{
    if(isPlatformBrowser(this.platformId))
    {
         window.location.href = url;
    }
    else
    {
         this.httpResponseData.redirectUrl = url;
    }
}

最后，在您的网络服务器中，检查 respData.redirectUrl 属性的值，如果设置了 url 则重定向

【讨论】：

redirect(url:string) - 这个方法写在哪里？我如何将 httpResponseData 从角度返回到服务器？你能解释更多细节......或举一些例子......谢谢@David
重定向方法必须在angular中定义
应该如何以及在哪里定义
这样一个简单的功能有这么多问题的框架在高级编程中没有一席之地