Невозможно получить ни путь, ни URL-адрес от углового маршрутизатора

Question

Я не могу получить ни URL, ни путь от ActivatedRoute, ни импорт маршрутизатора. Он выводит пробел для пути "" и "/" для URL. Я помню, как использовал рабочую версию. Единственное, что фиксирует правильный маршрут - Router.events. Я также не могу подписаться на URL в ActivatedRoute. Вот код

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'api-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  routePath: string = '';

  constructor(
    private _r: Router,
    private _ar: ActivatedRoute) {
    this._r.events.subscribe((event: any) => {
      if (event instanceof RoutesRecognized) {
          // '/teams' output with route http://localhost:4200/teams
        console.log(event.url);
      }
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    });

  }


  ngOnInit() {
    console.log(this._ar.pathFromRoot.toString()); // Blank output with route http://localhost:4200/teams
    console.log(this._ar.routeConfig.path.toString());  // Blank output with route http://localhost:4200/teams
    console.log(this._ar.snapshot.url);  // Blank output with route http://localhost:4200/teams
    this._ar.url.subscribe((urlsegment: UrlSegment[]) =>{
      console.log(urlsegment) // Unable to subscribe with route change to /teams
    })
  }

}

Что-то, чего мне здесь не хватает? Я видел это Угловой URL-адрес маршрутизатора возвращает косую черту

Мои маршруты:

const APPMainRoutes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'teams', component: CollaborateComponent},
    {path: 'login', component: LoginComponent},
];

Мои версии:

угловой CLI: 6.1.4 Узел: 10.7.0 ОС: Linux x64 Угловой: 6.1.4 ... анимации, cli, common, компилятор, compiler-cli, core, формы ... http, language-service, платформа-браузер ... платформа-браузер-динамическая, маршрутизатор

Версия пакета

@ angular-devkit / architect 0.7.4 @ angular-devkit / build-angular 0.7.4 @ angular-devkit / build-optimizer 0.7.4 @ angular-devkit / build-webpack 0.7.4 @ angular-devkit / core 0.7.4 @ angular-devkit / schematics 0.7.4 @ angular / cdk 6.4.6 @ угловой / материал 6.4.6 @ ngtools / webpack 6.1.4 @ schematics / angular 0.7.4 @ schematics / update 0.7.4 rxjs 6.2.2 машинопись 2.7.2 webpack 4.9.2

Answer 1

Если ничего не помогает, вы можете использовать location.pathname, который является глобальным

Answer 2

Вы можете проверить instanceof NavigationStart и NavigationEnd

вот пример

в app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

export class AppComponent {

  constructor(private router: Router) { }

  ngOnInit() {

    this.router.events.subscribe((event: any) => {
      if(event instanceof NavigationStart) {
        console.log('start => ',event.url);
      }
      if(event instanceof NavigationEnd) {
        console.log('end => ',event.url);
      }
    });
  }
}

Stackblitz демо

Answer 3

Компонент, в котором я пытался получить доступ к URL или пути, был компонентом хост / родитель / параллельный к дереву компонентов. Все вышеперечисленные сбои позволили захватить правильный путь inside компонентов маршрута, но не родительский / хост / компонент параллельного дерева. Там работают только Router.events. Удивительно, но я не смог перехватить и заставить работать ActivatedRoute.url.subscribe, а также внутри родителя / хоста.

<app-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<router-outlet>
<team-cmp>Router and ActivatedRoute Works here</team-cmp>
</router-outlet>
<sidebar-cmp>
Router and ActivatedRoute does not Work here. Only Router.events Work here
<sidebar-cmp>
</app-cmp>

Это работает в хосте / родительском / параллельном дереве - или:

// inject in constructor
constructor( private _router: Router) {

// Call below anywhere within Init or Constructor etc
this._router.events.subscribe((event: any) => {
      if (event instanceof RoutesRecognized) {
        console.log(event.url); // WORKS
      }
      // NavigationStart // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized
    });

}

Answer 4

Вы можете получить информацию о URL, как это:

ngOnInit() {
    console.log(this._r.url);
  }

И если вам нужно получить queryParams в URL Вы можете получить:

this._r.snapshot.queryParamMap