Angular Universal - 在服务器端获取当前 url答案

【问题标题】：Angular universal - get current url in server sideAngular Universal - 在服务器端获取当前 url
【发布时间】：2021-01-21 02:04:25
【问题描述】：

这个问题可能很简单，但我在任何地方都找不到有效的解决方案。我有一个网站，我在其中设置了 Angular SSR，并希望在我的一个 Angular 组件中获取当前 url。我浏览了多个站点并了解到我必须从通用服务器传递主机信息并在 Angular 组件中获得相同的信息。

我传递主机信息的 server.ts 文件中的代码片段

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl },
        { provide: 'host', useValue: req.get('host') }, // sending host name in provider
      ],
    });
  });

我的host.ts文件如下，

import { InjectionToken } from '@angular/core';
export const HOST_ID = new InjectionToken<string>('host');

这就是我试图在 app component.ts 中获取主机名的方法，它总是给我空值。

export class AppComponent implements OnInit {
  isLoading: boolean = false;
  constructor(
    @Optional() @Inject(HOST_ID) private host: InjectionToken<string>
  ) {}

  ngOnInit(): void {
    if (platformServer) console.log(this.host);
  }

使用的 Angular 版本是 9。请有人对此问题有所了解。非常感谢。

【问题讨论】：

你试过angular.io/api/common/PlatformLocation服务吗？
是的，现在尝试了，我现在可以获取主机名。非常感谢@Chellappanவ

标签： angular angular-universal

【解决方案1】：

您似乎已经在查看 cmets 时发现了这一点，但我想知道您的代码中的原始问题是否是您实际上并未在服务器的侦听器中使用 HOST_ID 注入令牌。

如果你把你的监听器改成这样：

// All regular routes use the Universal engine
server.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      { provide: HOST_ID, useValue: req.get('host') }, // sending host name in provider
    ],
  });
});

我想你的问题会解决的。

【讨论】：