Angular universal - 在服务器端获取当前 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 注入(inject) token 听众。

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

// 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
    ],
  });
});

我想你的问题会得到解决。