Question

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

我尝试了以下操作，但是它带有数据ID，并且路由不起作用。

请提供专家建议。

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

HTML

ngOnInit() {

    this.hostlistService.obtenerToken()
        .pipe(
          mergeMap(resultToken => {
            //do whatever you want to do with the token
            //i.e. Save the token in the localstorage like this - 
            localStorage.setItem("token",resultToken);
            return this.hostlistService.obtenerInmuebles(resultToken);
          })
        )
        .subscribe(
          result => {
            console.log("INMUEBLES",result.data);
          },error =>{
            console.log(error);
          }
        );    
  }

TS

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

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

Answer 1

有很多方法可以获取不带参数（'？dataId = 1100'）的当前路线。

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

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

否则，您可以使用Router包中Angular的@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。您还需要触发面包屑的刷新。为此，您可以例如订阅路由器事件。

角获取当前路线

4 个答案: