-1

使用角度7（不使用角度通量。），要求是，我们需要显示当前屏幕的路径。比如，假设有 a、b、c、d 屏幕。我们可以从 a->b->c->d 导航。需要显示“a->b->c->d”的路径。此外，我们可以通过单击返回按钮返回，所以如果在 d 上单击返回，那么我们处于 a->b->c。结构就像，有一个组件 X，它是内部的父<router-outlet>组件，其中组件 a，b，c，d 将根据导航附加。后退按钮和标题在组件 X 中可用，以及需要显示此路径位置的标题。

点击图片

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

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

此外，屏幕中存在像这样的选项卡点击图片 当点击tab1组件是a->b->c->d当点击tab2时，无论在哪个屏幕上，都有e->f组件。所以导航路径现在应该相应地改变。tab3 也一样。这些 a,b,c,d 也是可点击的，这样当点击 b 时，我们将导航到 a->b（现在应该显示 a->b）。

如何，这可以在 Angular 7 中实现？任何帮助表示赞赏。

4

1 回答 1

0

您可以使用eventsof执行此操作Router module，然后创建一个名为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);
        }
    }

}

面包屑.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>

无论您在哪里定义路线，设置一个名为的数据breadcrumb并分配特定名称，如下所示：

带模块：

{ path: 'incident', loadChildren:(...), data: { breadcrumb: 'Incident' } }

与组件：

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

用法 ：

在您的布局或母版页中放置以下内容app-breadcrumb

<app-breadcrumb></app-breadcrumb>
于 2019-12-05T07:02:33.203 回答