无法从角度路由器获取路径或 url [英] Unable to get the path nor url from angular router

问题描述

我无法从 ActivatedRoute 或路由器导入中获取 URL 或路径.它为路径"输出空白，为 URL 输出/".我记得使用了一个工作版本.唯一能捕获正确路由的是 Router.events.我也无法订阅 ActivatedRoute 中的 URL.这是代码

I am unable to get the URL nor the path from ActivatedRoute nor Router imports. It outputs a blank for path "" and '/' for URL. I remember using a working version. The only thing that captures the right route the Router.events. I am also unable to subscribe to the URL in the ActivatedRoute. Here is the code

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'api-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  routePath: string = '';

  constructor(
    private _r: Router,
    private _ar: ActivatedRoute) {
    this._r.events.subscribe((event: any) => {
      if (event instanceof RoutesRecognized) {
          // '/teams' output with route http://localhost:4200/teams
        console.log(event.url);
      }
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    });

  }


  ngOnInit() {
    console.log(this._ar.pathFromRoot.toString()); // Blank output with route http://localhost:4200/teams
    console.log(this._ar.routeConfig.path.toString());  // Blank output with route http://localhost:4200/teams
    console.log(this._ar.snapshot.url);  // Blank output with route http://localhost:4200/teams
    this._ar.url.subscribe((urlsegment: UrlSegment[]) =>{
      console.log(urlsegment) // Unable to subscribe with route change to /teams
    })
  }

}

我在这里遗漏了什么吗?我见过这个 Angular 路由器 url 返回斜杠

Anything I am missing here? I have seen this Angular router url returns slash

我的路线:

const APPMainRoutes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'teams', component: CollaborateComponent},
    {path: 'login', component: LoginComponent},
];

我的 ng 版本:

Angular CLI:6.1.4节点:10.7.0操作系统:Linux x64角度:6.1.4... 动画、cli、common、编译器、编译器-cli、核心、表单... http、语言服务、平台浏览器... 平台浏览器动态，路由器

Angular CLI: 6.1.4 Node: 10.7.0 OS: linux x64 Angular: 6.1.4 ... animations, cli, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

@angular-devkit/architect 0.7.4@angular-devkit/build-angular 0.7.4@angular-devkit/build-optimizer 0.7.4@angular-devkit/build-webpack 0.7.4@angular-devkit/核心 0.7.4@angular-devkit/schematics 0.7.4@angular/cdk 6.4.6@角度/材料 6.4.6@ngtools/webpack 6.1.4@原理图/角度 0.7.4@原理图/更新 0.7.4rxjs 6.2.2打字稿 2.7.2网络包 4.9.2

@angular-devkit/architect 0.7.4 @angular-devkit/build-angular 0.7.4 @angular-devkit/build-optimizer 0.7.4 @angular-devkit/build-webpack 0.7.4 @angular-devkit/core 0.7.4 @angular-devkit/schematics 0.7.4 @angular/cdk 6.4.6 @angular/material 6.4.6 @ngtools/webpack 6.1.4 @schematics/angular 0.7.4 @schematics/update 0.7.4 rxjs 6.2.2 typescript 2.7.2 webpack 4.9.2

推荐答案

如果所有其他方法都失败了，您可以使用全局的 location.pathname

If all else fails you can use location.pathname which is global

这篇关于无法从角度路由器获取路径或 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！