Question

我想为我的应用程序制作面包屑，所以我将“标题”放在我的数据路线上，如下所示：

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },    
    {path: 'help', component: HelpComponent },
    {
        path: 'admin',
        component: AdminComponent,
        runGuardsAndResolvers: 'always',
        data: { title: "Admin"},
        canActivate: [AuthGuard],
        children: [
            {
                path: 'organisation', 
                component: ListOrganizationComponent, 
                data:{title: "Organisation"}, 
                resolve: {organizations: ListOrganizationResolver}
            }        
        ]
    },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

export class AdminComponent implements OnInit {
    title: string = "";
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
      this.title = this.route.snapshot.data.title;
    }
}

当我运行代码并转到：localhost:4200/admin/organisation时只显示来自管理员的标题（title =“Admin”）。我想从儿童路线获得头衔组织..怎么做？有没有简单的方法来制作有角度的面包屑？

Answer 1

您可以使用ActivatedRoute上的firstChild属性来检索firstChild路由，然后继续检索数据，就像检查当前路由一样。这是一个例子：

export class AdminComponent implements OnInit {
  breadcrumb: string;

  ngOnInit() {
    let breadcrumb = this.route.snapshot.data['title'];

    if (this.route.snapshot.firstChild) {
        breadcrumb += ' > ' + this.route.snapshot.firstChild.data['title'];
    }

    this.breadcrumb = breadcrumb;
  }

  constructor(private route: ActivatedRoute) {}
}

这是一个working demo。请务必导航至/admin/organization。

对于您的第二个问题，您可以尝试ngx-breadcrumbs作为提及的其他答案。

Answer 2

对于您的第二个问题，我使用了 ngx-breadcrumbs ，这很容易配置，您无需开箱即用。

<强> npm --save install ngx-breadcrumbs

（Angular 5+）从子路径获取数据

2 个答案: