Question

使用Angular2，我如何检索当前活动组件和路径？

例如，我可能有以下路线：

{ path: '', component: HomeComponent },
{ path: 'list', component: ListComponent },
{ path: ':id/', component: CustomComponent }

如果我导航到https://domain.com/test，有没有办法知道我正在查看CustomComponent并检索ID /路径，在这种情况下是“测试”？

我可以使用window.location.pathname和正则表达式来获取路径，但这很麻烦，但仍然不允许我轻松获取活动组件。

Answer 1

是的，您可以使用路由器快照检查当前活动组件 -

import { Router,ActivatedRoute }      from '@angular/router';

constructor(public route : ActivatedRoute) {
    var snapshot = route.snapshot;
    console.log(snapshot._routeConfig.component.name); //This will give you the name of current active component
  }

注意 - snapshot._routeConfig.component.name 它会为您提供有效的组件名称，如果您需要网址，也可以通过.url而不是名称来获取

Answer 2

您可以在路由器配置中为根{enableTracing: true}启用跟踪，以便更好地了解如何解析和激活路由

Answer 3

是的，角度2入门指南涵盖了所有这些，基本上你需要在你的组件上注入ActivatedRoute然后你可以通过订阅路线参数来检索你想要的信息。

我真的建议你做英雄角度教程之旅，这实际上是他们提供的非常好的学习材料。

在组件构造函数上注入ActivatedRoute：

previousChange

Answer 4

当然，使用ActivatedRoute模块可以访问路由参数或绑定参数cgange event

import {ActivatedRoute} from "@angular/router";

constructor(private activatedRoute: ActivatedRoute) { 
}

this.activatedRoute.params.subscribe(params => {
  console.log(params['id']);
});

此外，您还可以使用

访问当前的组件类型

this.activatedRoute.component;

Answer 5

在ActivatedRouteSnapshot中，component属性被定义为以下其中之一

component: Type<any> | string | null;

因此，除非您已经确定拥有component.name，否则您不能只做Type<any>。这是因为字符串上的.name不存在。

现在Type<any>实际上是一个创建类型（您的组件类型）的函数，并定义为：

export interface Type<T> extends Function {
    new (...args: any[]): T;
}

因此，您可以执行以下操作，该操作实际上会编译

 if (typeof(this.route.snapshot.component) === 'function')
 {
     // the compiler is 'smart' enough to know that component here must be Type<T>
     const name = this.route.snapshot.component.name;
 }

做到这一点的“优雅”方法是使用打字稿字体保护程序（尽管坦白地说，这并不能给我带来很多好处）。

isComponent(item: Type<any> | string | null): item is Type<any>
{
    return typeof item === 'function';
}

然后您可以说this.name = isComponent(this.route.snapshot.component) ? this.route.snapshot.component : null。

重要： component.name在AOT版本中仍然有效，但是不幸的是，--prod最终会变成r之类的随机变量。

我不得不注入private element: ElementRef<HTMLElement>，然后寻找标签名称。即使使用AOT生产的产品，它仍然会存在。这样做可能会降低性能，因此如果您经常使用它，请对其进行缓存。

    if (element.nativeElement.tagName.startsWith('RR-')){
        super.name = element.nativeElement.tagName;
    }

检索活动组件和路径

5 个答案: