typescript 正在检索活动组件和路径

zzoitvuj  于 2022-12-24  发布在  TypeScript
关注(0)|答案(5)|浏览(103)

使用Angular2时,如何检索当前活动的元件和路径?
例如,我可能有以下路线:

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

如果我导航到https://domain.com/test,是否有方法知道我当前正在查看CustomComponent并检索id/path(在本例中为“test”)?
我可以使用带有regex的window.location.pathname来获取路径,但这很混乱,仍然不允许我轻松地获取活动组件。

a11xaf1n

a11xaf1n1#

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

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,也可以通过.url而不是name获取

6ie5vjzr

6ie5vjzr2#

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

一个“优雅”的方法是使用一个typescript typeguard(尽管坦率地说,在这种情况下,它并没有给予你带来比我刚才所说的更多的好处)。

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 prod构建中,这仍然存在。这样做可能会有性能成本,所以如果你经常使用它,请缓存它。

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

cwxwcias3#

您可以在路由器配置中为根{enableTracing: true}启用跟踪,以获得更多关于路由是如何解析和激活的信息

zxlwwiss

zxlwwiss4#

是的,Angular 2入门指南涵盖了所有这些,基本上你需要在你的组件上注入ActivatedRoute,然后你可以通过订阅路由参数来检索你想要的信息。
我真的会推荐你做英雄的Angular 教程之旅,这实际上是他们提供的相当好的学习材料。
在组件构造函数上注入ActivatedRoute:

constructor(private route: ActivatedRoute) {
}

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

k3fezbri5#

当然,使用ActivatedRoute模块可以访问路由参数或绑定到参数cgange事件

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

constructor(private activatedRoute: ActivatedRoute) { 
}

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

此外,您还可以在此处使用以下命令访问当前组件类型

this.activatedRoute.component;

相关问题