Question

你如何获得当前的路线并得到它的数据，儿童和它的父母？

说这是否是路线结构：

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 公司，得到它的父母w / c 关于，它是数据，它是兄弟姐妹，如任务等？

Answer 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);
}
}

Answer 2

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

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'];
  }

}

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

2 个答案: