Angular 通用 - 在服务器端获取当前 url

Question

这个问题可能很简单，但我在任何地方都找不到有效的解决方案。 我有一个网站，在那里我设置了 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 中获取主机名的方法，它总是给我 null 值。

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。请有人对这个问题有所了解。 提前非常感谢。

Answer 1

看起来您已经在查看评论时发现了这一点，但我想知道您的代码中的原始问题是否是您实际上没有在服务器的侦听器中使用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
    ],
  });
});

我认为您的问题将得到解决。