Question

我正在尝试在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

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

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

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

您可以订阅router.events并过滤 NavigationEnd 事件以获取当前有效路线网址。

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

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

Answer 3

如果您想获取当前网址，请改用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

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

Angular 2 - 如何在app组件中获取当前url

4 个答案: