angular - Angular - 如何在应用程序组件中获取当前网址

Question

我正在尝试获取应用程序的当前 url，AppComponent但它总是返回根路径/。例如，如果我/users在新选项卡中访问，预期结果应该是/users，但是当我在控制台中检查时，它显示 /.

但是，当我在子组件中执行相同操作时，它会起作用。以下是我的代码：

import {Component} from '@angular/core'
import {ActivatedRoute, Router} from '@angular/router'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.scss'],
})

export class AppComponent {
    constructor(router: Router) {    
        console.log(this.router.url) // return '/'    
    }
}

这怎么可能？

Answer 1

您可以订阅router.events和过滤NavigationEnd事件以获取当前活动的路由 url。

this.router.events.subscribe((e) => {
  if (e instanceof NavigationEnd) {
    console.log(e.url);
  }
});

提到如果没有定义有效的路由器，这将失败。

Answer 2

在 Angular 4 中，您可以使用 Location 模块从 app.component.ts中获取完整的路径字符串。

例如，在您的浏览器中，当您导航到“ http://yoursite.com/products/cars?color=red&model=202 ”时，下面的代码将输出 pathString“/products/cars?color=red&model=202”。

在 app.component.ts

import { Component } from '@angular/core';
import { Router} from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

    constructor(
    private location: Location
  ) { 
      var pathString = location.path();
      console.log('appComponent: pathString...');
      console.log(pathString);       
  }
}

*信用：https ://tutorialedge.net/post/typescript/angular/angular-get-current-route-location/

Answer 3

如果要获取当前 url，请ActivatedRoute改用。在你的构造函数中像这样添加它

 constructor(
 private router: Router,  
 private route: ActivatedRoute) {    
     route.params.subscribe(p => {
      //let's say you want to get id parameter.
         console.log(p['id']);
  }); 
    }

Answer 4

对于第一次访问 SPA，似乎当前的 url 应用程序并不总是可以通过 Angular 方式访问。尚未加载任何路由，但您可能仍需要访问某些内部进程所请求的 url。

所以我这样做了：

let strings = window.location.href.split(window.location.host);
let url = strings[strings.length-1];

Answer 5

您递归地迭代父属性，直到您到达与您的应用程序的根对应的最顶层元素。