Question

在这里，我有MyComponent，其中的路由器根据路由加载了其他不同的组件，我想在标头组件中获取完整的当前路由，但是ActivatedRoute.url仅显示{path：“ d”}而不是完整路径，或者路径的最后一部分（我需要）。您是否有关于如何获取已加载路由的标头组件的想法？

my-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

这是因为URL是在导航事件上构造的字符串。

我建议您听导航事件，然后将结果映射到当前URL。

This stackblitz解释了如何做到这一点。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <a routerLinkActive="active" 
      routerLink="/login">Login</a> |

    <a routerLinkActive="active" 
      routerLink="/home">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 

    <router-outlet></router-outlet>
  </div>
  <div>
    Current route : {{ url$ | async }}
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  url$ = this.router.events.pipe(
    map(() => this.router.url),
  );

  constructor(
    private router: Router
  ) {}

}

Answer 2

您可以通过以下方式访问第一个子数据：

constructor(route: ActivatedRoute) {
  route.url.subscribe(() => {
    console.log(route.snapshot.firstChild.data);
   });
}

Answer 3

您可以简单地使用此技术

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() {
      }

    }

Angular 6 ActivatedRoute网址

3 个答案: