如何从app.component获取路由名称？

Question

在我的app.component.ts中,我有下面的代码来获取路由名称,但我总是得到/.有谁知道为什么？我期望能获得例如home,contact.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private router: Router) {
    console.log(router.url);
  }
}

Answer 1

AppComponent仅在加载应用程序时初始化,并且构造函数已执行.因此它显示"/"的原因.当您导航到其他路由时,AppComponent将保持加载状态,并且不会再次执行构造函数.

如果您可以提供有关您要完成的内容的更多信息,我们可能会为您提供替代建议.

如果要查看路径并获取URL,可以在此处使用observable.像这样的东西:

this.router.events.subscribe((event: Event) => {
    if (event instanceof NavigationEnd) {
        console.log((<NavigationEnd>event).url);
    }
});

或者,如果您只是想将其用于调试目的,则可以启用跟踪,如下所示:

RouterModule.forRoot([
    { path: 'welcome', component: WelcomeComponent },
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
], { enableTracing: true })