无法从角度路由器获取路径或 url

Posted 2023-03-15

【中文标题】无法从角度路由器获取路径或 url

【英文标题】：Unable to get the path nor url from angular router

【发布时间】：2019-02-08 03:07:48

【问题描述】：

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

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 router url returns slash

我的路线：

const APPMainRoutes: Routes = [
    path: '', 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、编译器、compiler-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/核心 0.7.4 @angular-devkit/原理图 0.7.4 @角/cdk 6.4.6 @角/材料6.4.6 @ngtools/webpack 6.1.4 @原理图/角度 0.7.4 @原理图/更新 0.7.4 rxjs 6.2.2 打字稿2.7.2 webpack 4.9.2

【问题讨论】：

如我所见，您还没有在路由中使用 DashboardComponent。并从“redirectTo: '/login'”中删除斜杠

它没有帮助。它可能也无济于事。我的问题是/teams 路由没有被捕获为/ 或路径为"" 我会担心如果它只是/login

似乎它只适用于带有构造函数的事件捕获 - 如果你注意到了

stackblitz.com/edit/… 看这个演示.. 在这里我可以使用路由器获取 url

Aniket，在本演示中查看 app.component 中的结果。 stackblitz.com/edit/…

【参考方案1】：

你可以像这样获取 url 信息：

ngOnInit() 
    console.log(this._r.url);
  

如果你需要在 url 中获取 queryParams 你可以得到：

this._r.snapshot.queryParamMap

【讨论】：

抱歉没用 - 也没有。得到一个'/'并且地图是空的

@Gary 请检查您在 Routes 模块中的 url 设置。如果你访问 localhost/test ，那么 this._r.url 必须返回 /test。

@什么是 DashboardComponent 的 url ??

很好 - 它的侧边栏。并且是router-outlet的父dom。路由组件可以捕捉到 url。

@Gary check stackblitz.com/edit/angular-s9mute?file=src/app/login/… 如果你需要获取 url /login /team ，那么你应该定义 LoginComponent 或 TeamComponent。而如果要获取父组件中的url链接，就得用另一种方式了……

【参考方案2】：

您可以检查 instanceof NavigationStart 和 NavigationEnd

这是一个例子

在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 演示

【参考方案3】：

我试图访问 url 或路径的组件是组件树的主机/父/并行组件。以上所有故障都允许捕获正确的路径inside 路由组件，但不能捕获父/主机/并行树组件。只有 Router.events 在那里工作。令人惊讶的是，我无法在父/主机内捕获并使用 ActivatedRoute.url.subscribe。

<app-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<router-outlet>
<team-cmp>Router and ActivatedRoute Works here</team-cmp>
</router-outlet>
<sidebar-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<sidebar-cmp>
</app-cmp>

这适用于主机/父/并行树 - 或：

// inject in constructor
constructor( private _router: Router) 

// Call below anywhere within Init or Constructor etc
this._router.events.subscribe((event: any) => 
      if (event instanceof RoutesRecognized) 
        console.log(event.url); // WORKS
      
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    );

【讨论】：

非常感谢！它帮助我获取了用户在 init 的 boostrapped 应用程序组件上的浏览器中输入的 URL（我试图在实际呈现任何内容之前获取用户打算去的“登陆页面”）

【参考方案4】：

如果一切都失败了，您可以使用全局的location.pathname