如何在Angular中获取完整url？

我的应用程序利用Angular Universal，我想在Angular组件中获取当前

url

的完整路径。我想我必须使用

窗口

对象，在那里我可能需要注入窗口，或者更好的选择是简单地检查它是否在浏览器中。是否有使用Angular API的更清洁的解决方案

  url: string;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((val) => {
      this.url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
    });
  }

---

编辑：我要问的问题是如何以符合Angular Universal的方式获取完整的

url

，如果您使用的是Express，您可以将该url从Express注入到您的组件中

步骤#1：修改节点服务器以传递所需的url

//Get index.html file contents from dist/browser/index.html
const DIST_FOLDER = join(process.cwd(), 'dist'); 
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();


app.engine('html', (_, options, callback) => {
var fullUrl = options.req.protocol + '://' + options.req.get('host') + options.req.originalUrl;

  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: 'serverUrl',
        useValue: fullUrl
      }
    ]
  }).then(html => {
    callback(null, html);
  });
});

步骤2：在组件/服务中，添加可选参数

constructor(@Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('serverUrl') protected serverUrl: string)
{
 // Here, this.serverUrl will have a value only when using angular universal

---

如果您使用的是Express，则可以将Express中的url插入到组件中

步骤#1：修改节点服务器以传递所需的url

//Get index.html file contents from dist/browser/index.html
const DIST_FOLDER = join(process.cwd(), 'dist'); 
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();


app.engine('html', (_, options, callback) => {
var fullUrl = options.req.protocol + '://' + options.req.get('host') + options.req.originalUrl;

  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: 'serverUrl',
        useValue: fullUrl
      }
    ]
  }).then(html => {
    callback(null, html);
  });
});

步骤2：在组件/服务中，添加可选参数

constructor(@Inject(PLATFORM_ID) private platformId: Object, @Optional() @Inject('serverUrl') protected serverUrl: string)
{
 // Here, this.serverUrl will have a value only when using angular universal

---

尝试这样做：console.log（“location”，window.location.href）；编辑以澄清问题：console.log（“location”，window.location.href）；编辑以澄清问题，确切地说，我在寻找什么，应该给我一个值，而不仅仅是空白，直到浏览器接管。David我复制粘贴了您的代码，只将

模板

替换为

'./src/index.html'

。在此之后，我收到此错误，应用程序将不会运行

选择器“app root”与任何元素都不匹配。

@user7747472

文档

属性必须是

index.html

文件的html，而不是路径。我编辑了我的answer@David哦，好的，我知道了。这个

DIST_文件夹

是一个神奇的函数还是一个常数。很抱歉，我对angularTy David没什么好感，这帮了大忙，终于让它起作用了。：）正是我所寻找的，应该给我一个值，而不仅仅是在浏览器接管之前保持空白。David我复制粘贴了您的代码，只将

模板

替换为

'./src/index.html'

。在此之后，我收到此错误，应用程序将不会运行

选择器“app root”与任何元素都不匹配。

@user7747472

文档

属性必须是

index.html

文件的html，而不是路径。我编辑了我的answer@David哦，好的，我知道了。这个

DIST_文件夹

是一个神奇的函数还是一个常数。很抱歉，我对angularTy David没什么好感，这帮了大忙，终于让它起作用了。：）