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

问题描述

我无法从ActivatedRoute获取URL或路径，也无法获取路由器导入。它为路径输出空白，为URL输出/。我记得使用过工作版。唯一能捕获Router.events正确路由的东西。我也无法订阅ActivatedRoute中的URL。以下是来自'@ angular / core'的代码

  import {Component，OnInit，ViewChild，ElementRef};来自'@ angular / router'的
 import {Router，ActivatedRoute，UrlSegment，NavigationStart，RoutesRecognized}; 
 
 @Component（{
 selector：'api-dashboard'，
 templateUrl：'./dashboard.component.html'，
 styleUrls：['./ dashboard.component.css'] 
}）
导出类DashboardComponent实现OnInit {
 
 routePath：string =''; 
 
构造函数（
 private _r：路由器，
 private _ar：ActivatedRoute）{
 this._r.events.subscribe（（event：any）=> { 
 if（事件instanceof RoutesRecognized）{
 //'/ teams'输出路由http：// localhost：4200 / teams 
 console.log（event.url）; 
 } 
 // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized 
}）; 
 
} 
 
 
 ngOnInit（）{
 console.log（this._ar.pathFromRoot.toString（））; //路径为http：// localhost：4200 / teams的空白输出
 console.log（this._ar.routeConfig.path.toString（））; //路径为http：// localhost：4200 / teams 
 console.log（this._ar.snapshot.url）的空白输出; //路径为http：// localhost：4200 / teams的空白输出
 this._ar.url.subscribe（（urlsegment：urlSegment []）=> {
 console.log（urlsegment）//无法订阅路线更改为/团队
}）
} 
 
} 
  

我在这里缺少什么？我看过这个 Angular router url返回斜杠

我的路线：

  const APPMainRoutes：路线= [
 {路径：''，redirectTo ：'/ login'，pathMatch：'full'}，
 {path：'teams'，component：CollaborateComponent}，
 {path：'login'，component：LoginComponent}，
] ; 
  

我的版本：

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

包版本

@ 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

解决方案

您可以检查 NavigationStart 和 NavigationEnd <的实例/ p>

这是 app.component.ts



c>

 从'@ angular / core'导入{Component，OnInit};来自'@ angular / router'的
 import {Router，NavigationStart，NavigationEnd}; 
 
导出类AppComponent {
 
构造函数（私有路由器：路由器）{} 
 
 ngOnInit（）{
 
 this .router.events.subscribe（（event：any）=> {
 if（event instanceof NavigationStart）{
 console.log（'start =>'，event.url）; 
} 
 if（事件instanceof NavigationEnd）{
 console.log（'end =>'，event.url）; 
} 
}）; 
} 
} 
  

Stackblitz 演示

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
    })
  }

}

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

My routes:

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

My ng versions:

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

Package Version

@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

解决方案

You can check instanceof NavigationStart and NavigationEnd

here's is the example

in app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

export class AppComponent {

  constructor(private router: Router) { }

  ngOnInit() {

    this.router.events.subscribe((event: any) => {
      if(event instanceof NavigationStart) {
        console.log('start => ',event.url);
      }
      if(event instanceof NavigationEnd) {
        console.log('end => ',event.url);
      }
    });
  }
}

Stackblitz demo

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