Angular

Question

我试图在 AppComponent 中获取当前 url 的应用程序，但它总是 returns 根路径 /。例如，如果我在新选项卡中访问 /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

如果要获取当前 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 2

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

Answer 3

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

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

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

Answer 4

在 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 5

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

所以我这样做了：

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

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

Angular - How to get current url in app component

angular-router