Angular получить текущие маршруты - PullRequest
Новая
       17

Angular получить текущие маршруты

0 голосов
/ 06 июня 2019

Я пытаюсь создать собственную хлебную крошку. Я хотел бы получить текущие маршруты без dataid.

Я попробовал следующее, но оно идет с идентификатором данных, и маршрутизация не работает.

Экспертный совет, пожалуйста.

Фактическая ссылка: 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;
        }
      }

  });

Ожидаемый путь крошки = = настройки / данные с соответствующими маршрутами при нажатии на настройки

Ответы [ 4 ]

2 голосов
/ 06 июня 2019

Существует несколько способов получить текущий маршрут без параметров ('? DataId = 1100').

Это два способа сделать это с помощью Vanilla JavaScript. 

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]);
}
0 голосов
/ 06 июня 2019

Вы можете ввести ActivatedRoute, который содержит информацию о сегментах URL. Одна ошибка заключается в том, что он указывает на маршрут, на котором отображается компонент, а не на самый последний маршрут. Я предполагаю, что ваши хлебные крошки будут отображаться в каком-либо корневом компоненте, чтобы он отображался в любом месте страницы. Что вы можете сделать, так это найти детей маршрута и найти самый последний маршрут таким образом. Что-то вроде while(route.firstChild) route=route.firstChild. Вам также нужно будет запустить обновление вашей крошки. Для этого вы можете, например, подписаться на события маршрутизатора.

0 голосов
/ 06 июня 2019

Привет. Вам понадобится объект ActivatedRoute от роутера, и он будет использован для получения URL-адреса и удаления нужной части без параметров, как показано ниже. 

constructor(private route : ActivatedRoute) { }

ngOnInit() {
 console.log(this.route.routeConfig.path.split('?')[0]);
}
0 голосов
/ 06 июня 2019

Вы можете использовать: 

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