Angular 6 - 获取当前路线及其数据答案

【问题标题】：Angular 6 - Get current route and its dataAngular 6 - 获取当前路线及其数据
【发布时间】：2023-03-24 11:05:02
【问题描述】：

如何获取您当前所在的路线及其数据、子项和父项？

如果这是路由结构：

const routes: Routes = [
  {path: 'home', component: HomeComponent, data: {title: 'Home'}},
  {
    path: 'about', 
    component: AboutComponent, 
    data: {title: 'About'},
    children: [
      {
        path: 'company',
        component: 'CompanyComponent',
        data: {title: 'Company'}
      },
      {
        path: 'mission',
        component: 'MissionComponent',
        data: {title: 'Mission'}
      },
      ...
    ]
  },
  ...
]

如果我目前在 CompanyComponent 中，我如何获取当前路线 w/c 是 Company，获取其父 w/c 是 about，其 data 和它的兄弟如 Mission 等？

【问题讨论】：

找到解决方案了吗？

标签： angular6 angular-router angular-activatedroute

【解决方案1】：

@Component({...})
export class CompanyComponent implements OnInit {

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

ngOnInit() {

  // Parent:  about 
  this.route.parent.url.subscribe(url => console.log(url[0].path));

  // Current Path:  company 
  this.route.url.subscribe(url => console.log(url[0].path));

  // Data:  { title: 'Company' } 
  this.route.data.subscribe(data => console.log(data));

  // Siblings
  console.log(this.router.config);
}
}

【讨论】：

我在this.route.data.subscribe(data => console.log(data)); 中得到一个空对象，知道可能是什么问题吗？
ActivatedRoute 为插座中加载的组件提供数据（已解析或静态）； more here。我最好的猜测是您可能正在从router-outlet 外部访问ActivateRoute 数据。我只是在这里猜测。我创建了一个简单的StackBlitz。如果你能重现这个问题，我可能会提供更好的帮助。
对我来说也是空的
获取空对象

【解决方案2】：

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
  }

  ngOnInit() {
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => {
          return this.getHeaderClasses();
        }),
      )
      .subscribe((headerClasses: string | null) => {
        this.headerClasses = headerClasses;
      });
    this.headerClasses = this.getHeaderClasses();
  }


  getHeaderClasses(): string | null {
    let child = this.route.firstChild;
    while (child) {
      if (child.firstChild) {
        child = child.firstChild;
      } else if (child.snapshot.data && child.snapshot.data['headerClasses']) {
        return child.snapshot.data['headerClasses'];
      } else {
        return null;
      }
    }
    return null;
  }

路由

{
  path: 'list',
  component: DialogListComponent,
  data: {
    headerClasses: 'col-lg-8',
  },
},

【讨论】：

【解决方案3】：

您可以像这样从快照中访问路由的数据属性：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor( private route: ActivatedRoute) {
    } 

    ngOnInit(): void {
     this.pageTitle = this.route.snapshot.data['title'];
  }

}

【讨论】：