角获取当前路线

Question

我正在尝试创建自定义面包屑。 我想获取没有dataid的当前路由。

我已经尝试过以下方法，但是它带有数据ID，并且路由不起作用。

请专家建议。

实际链接： http：// localhost：4200 / settings / data？dataId = 1100

的HTML

<ul >
  <li class="breadcrumb-item" *ngFor="let breadLink of breadcrumbListObj"><a [routerLink]="breadLink.link">{{breadLink.name}}</a></li>
</ul>

TS

 import { Component, OnInit } from '@angular/core';
    import { Location } from '@angular/common';
    import {Router, ActivatedRoute, NavigationEnd, RoutesRecognized, Params, PRIMARY_OUTLET} from '@angular/router'
    constructor(location: Location, activate: ActivatedRoute, router:Router) {

      router.events.subscribe((val) => {
      if (location.path() !== '') {
        this.route = location.path();
        this.breadcrumbListArray = this.route.split('/');
        for(let d of this.breadcrumbListArray) {
         this.breadcrumbListObj["link"] = "/" + d;
         this.breadcrumbListObj["name"] = d;
        }
      }

  });

预期的面包屑路径为=>设置/数据以及单击设置时的相应路由

Answer 1

没有参数（'？dataId = 1100'）的方法有很多种。

这是使用Vanilla JavaScript的2种方法。

console.log(`${location.protocol}//${location.host}${location.pathname}`);
console.log(window.location.href.split('?')[0]);

否则，您可以使用@angular/router包中的Angular的Router模块。

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

constructor(private router: Router) {
  console.log(this.router.url.split('?')[0]);
}

Answer 2

您可以使用：

this.activate.queryParams.filter(params => params.dataId).subscribe(params => {
     console.log(params);
     this.dataId = params.dataId;
     console.log(this.dataId); 
});

Answer 3

嗨，您将需要路由器中的ActivatedRoute对象，并使用它来获取url并剥离您想要的部分，没有参数，如下所示。

constructor(private route : ActivatedRoute) { }

ngOnInit() {
 console.log(this.route.routeConfig.path.split('?')[0]);
}

Answer 4

您可以注入包含有关url段信息的ActivatedRoute 。 一个陷阱是它指向呈现组件的路线，而不是最新的路线。 我猜您的面包屑将在某个根组件中呈现，以便它显示在页面上的任何位置。 您可以做的是找到该路线的子级，然后以这种方式找到最新的路线。 类似while(route.firstChild) route=route.firstChild 。 您还需要触发面包屑的刷新。 为此，您可以例如订阅路由器事件。