Angular 以角度7显示当前页面或屏幕的导航路径位置

使用角7（不使用角通量），要求是，我们需要显示当前屏幕的路径。比如说有a，b，c，d屏幕。 我们可以从a->b->c->d导航。需要显示“a->b->c->d”的路径。另外，我们可以通过点击后退按钮返回，所以，如果在d上点击后退，那么我们在a->b->c。 结构类似于，有一个组件X，它是父组件

，

被写入其中，组件a、b、c、d将基于导航附加到其中。后退按钮和标题在组件X中可用，标题中需要显示此路径位置

每个组件a、b、c、d都需要状态（7个角度状态）

为了实现后退按钮，路由事件是subscribe，它将当前路由和状态推到堆栈中，当单击后退时，弹出最后一条路由并导航到该页面所需的具有角度状态的路由

此外，屏幕上还有如下选项卡 当点击tab1时，组件是a->b->c->d当点击tab2时，无论在哪个屏幕上，e->f组件都在那里。所以导航路径现在应该相应地改变。表3也一样。 这些a、b、c、d也可以单击，这样当单击b时，我们将导航到a->b（现在应该显示a->b）

---

如何在angular 7中实现这一点？感谢您的帮助

您可以使用

路由器模块

的

事件

，然后创建名为

面包屑

的组件来显示导航

最终结果如下：

breadcrumb.component.ts：

import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, UrlSegment, NavigationEnd } from '@angular/router';

@Component({
    selector: 'app-breadcrumb',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './breadcrumb.component.html'
})
export class BreadcrumbComponent {
    public pageTitle: string;
    public breadcrumbs: { name: string; url: string }[] = [];

    constructor(
        public router: Router,
        public activatedRoute: ActivatedRoute) {
        this.router.events.subscribe(event => {
           if (event instanceof NavigationEnd) {
              this.breadcrumbs = [];
              this.parseRoute(this.router.routerState.snapshot.root);
           }
        })
    }

    parseRoute(node: ActivatedRouteSnapshot) {
        if (node.data['breadcrumb']) {
            if (node.url.length) {
                let urlSegments: UrlSegment[] = [];
                node.pathFromRoot.forEach(routerState => {
                    urlSegments = urlSegments.concat(routerState.url);
                });
                const url = urlSegments.map(urlSegment => {
                    return urlSegment.path;
                }).join('/');
                this.breadcrumbs.push({
                    name: node.data['breadcrumb'],
                    url: '/' + url
                })
            }
        }
        if (node.firstChild) {
            this.parseRoute(node.firstChild);
        }
    }

}

breadcrumb.component.html：

<ol class="breadcrumb" id="breadcrumb">
    <li class="breadcrumb-item">>
            <i class="fa fa-home mr-2"></i>Home</a>
    </li>
    <li *ngFor="let breadcrumb of breadcrumbs; let i = index;" class="breadcrumb-item">
        <a [hidden]="i == (breadcrumbs.length - 1)">{{breadcrumb.name}}</a>
        <span [hidden]="i != (breadcrumbs.length - 1)">
            <b>{{breadcrumb.name}}</b>
        </span>
    </li>
</ol>

带组件：

{ path: "personal",component: (...), data: { breadcrumb: "Personal" } }

用法：

在布局或母版页中放置以下

app breadcrumb

<app-breadcrumb></app-breadcrumb>

查看此库，您将得到它，谢谢您的回答，但还有一个条件，对于每个组件，我们都有包含服务调用所需的重要端点值的状态。如何保留这些状态？您可以在

parseRoute方法中管理所有状态。问题是什么？假设目前我们在a->b->c->d，现在我们通过解析当前路径并递归地构建url得到这个面包屑。但是，当我们在d，我们现在点击b，我们应该能够导航到a->b。但我们也需要b的状态。状态包含端点详细信息，当用户单击“a”组件中的任何列表时获取或决定这些详细信息。通过以上述方式进行解析，如何检索这些状态？比如，对于back按钮中的状态，我们在服务中使用了stack变量，这在讨论中已经解释过了。
<app-breadcrumb></app-breadcrumb>