Angular 6 ActivatedRoute 网址

Question

在这里，我有 MyComponent，其中路由器根据路由加载不同的其他组件，我想在标头组件中获取完整的当前路由，但 ActivatedRoute.url 仅显示 {path: "d"} 而不是完整路径，或路径（我需要）。您对如何在标题组件中获取加载的路由有任何想法。

我的component.component.html

<app-header></app-header>
<router-outlet></router-outlet>

header.component.ts

 ...
constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.route.url.subscribe(url=>console.log(url));
}

my-module-routing.module.ts

    {
    path: 'd',
    component: MyComponent,
    children: [
        {
            path: 'discover',
            component: DiscoverComponent
        },
        {
            path: 'book/:id',
            component: BookPageComponent
        },
        {
            path: 'search',
            component: SearchPageComponent
        }]
    }

---

在 d/search console.logs 上时

[UrlSegment]
0: UrlSegment
parameterMap: ParamsAsMap
parameters: {}
path: "d"
__proto__: Object
length: 1
__proto__: Array(0)

Answer 1

您可以简单地使用此技术

import { Component, OnInit, Input } from '@angular/core';
    import {ActivatedRoute} from "@angular/router";
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {
      constructor(private activatedRoute: ActivatedRoute) {
        this.activatedRoute.url.subscribe(activeUrl =>{
          this.url=window.location.pathname;
        });
      }

      ngOnInit() {
      }

    }