주: 본고는 2018년 작성 이후 보관되어 있습니다.현재, 이 해결 방안은 최신 각도 버전에 적용되지 않을 수도 있다.만약 네가 그 배후의 생각을 보고 싶다면, 너는 계속 읽을 수 있지만, 그 실현을 따르고 싶지 않을 수도 있다. 왜냐하면 그것은 이미 시대에 뒤떨어졌기 때문이다.감사합니다.
내 블로그를 방문하여 원본 게시물 얻기: Create a Simple Breadcrumb in Angular
최근에 저는 우리 회사를 위해 기업 자원 계획(ERP) 플랫폼을 구축하고 있습니다.이 시스템은 서로 다른 단일 모듈을 수용할 수 있는 유연성을 필요로 한다.이 플랫폼에서 사용자의 내비게이션은 사용자가 플랫폼에서 임무를 수행할 때 자신의 위치를 편리하게 알 수 있도록 명확하고 간결해야 한다.
예를 들어 Dashboard->IT HelpDesk->Issue Log->New 등 차원 구조를 위치 참조로 제공할 수 있다.가장 중요한 것은 사용자가 서로 다른 등급의 페이지를 편리하게 내비게이션할 수 있다는 것이다.그래서 나는 이 수요를 충족시키기 위해 빵 부스러기 부품을 구축했다.
정적 링크 데모:

동적 링크 데모 (123은 동적 ID):

라우팅 구성

우선, 루트를 정확하게 설정해야 합니다.
Dashboard->IT HelpDesk->Issue Log->New를 예로 들 수 있습니다.다음 코드 세션은 기본적인 루트 구조를 보여 줍니다.

{
    path: '',
    component: LoginComponent,
}, {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
        {
            path: 'it-helpdesk',
            component: ItHelpdeskComponent,
            children: [
                {
                    path: 'issue-log',
                    children: [
                        {
                            path: '',
                            component: IssueLogListComponent
                        },
                        {
                            path: 'new',
                            component: IssueLogDetailComponent
                        },
                        {
                            path: ':id',
                            component: IssueLogDetailComponent
                        }
                    ]
                }
            ]
        }
    ]
}

빵 부스러기를 사용하기 위해서 우리는 이 루트 설정에서 그것들의 이름을 얻어야 한다. 예를 들어 issue-log 에서 보듯이 빵 부스러기 중의 루트는 Issue Log 라고 표시한다.그리고 우리는 data 의 Route 속성을 사용하여 표시 이름을 저장합니다.따라서 라우팅 구성을 다음과 같이 수정합니다.

{
    path: '',
    component: LoginComponent,
}, {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
        breadcrumb: 'Dashboard',
    },
    children: [
        {
            path: 'it-helpdesk',
            component: ItHelpdeskComponent,
            data: {
                breadcrumb: 'IT Helpdesk'
            },
            children: [
                {
                    path: 'issue-log',
                    data: {
                        breadcrumb: 'Issue Log'
                    },
                    children: [
                        {
                            path: '',
                            component: IssueLogListComponent
                        },
                        {
                            path: 'new',
                            component: IssueLogDetailComponent,
                            data: {
                                breadcrumb: 'New'
                            }
                        },
                        {
                            path: ':id',
                            component: IssueLogDetailComponent,
                            data: {
                                breadcrumb: ''
                            }
                        }
                    ]
                },
            ]
        }
    ]
}

루트issue-log/:id에는 빵 부스러기 데이터가 없습니다.라우팅에 동적 매개변수가 포함되어 있기 때문입니다.잠시 후 빵 부스러기를 구축할 때, 우리는 자동으로 텍스트를 표시할 것이다.

빵 부스러기 부품

HTML

HTML 부분은 상당히 간단하다.ol 및 li 열거*ngFor의 모든 빵 부스러기만 사용하면 된다breadcrumb.component.html

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs">
    <span [routerLink]="breadcrumb.url" routerLinkActive="router-link-active">
      {{ breadcrumb.label }}
    </span>
  </li>
</ol>

SCSS

CSS도 복잡하지 않습니다.빵 부스러기가 멈추면 어두워져야 한다는 것을 주의하세요.breadcrumb.component.scss

.breadcrumb {
  background: none;
  font-size: 0.8em;
  margin: 0;
  a,
  span {
    color: darkgrey;
  }
  a:hover,
  span:hover {
    color: dimgrey;
    text-decoration: none;
  }
  li {
    list-style: none;
    float: left;
    margin: 5px;
  }
  li:last-child {
    margin-right: 20px;
  }
  li::after {
    content: "->";
    color: darkgrey;
  }
  li:last-child::after {
    content: "";
  }
}

타자 스크립트

가장 중요한 부분은 TypeScript 섹션입니다.

인터페이스

먼저 해야 할 일은 빵 부스러기의 데이터 구조를 표준화하는 인터페이스를 만드는 것이다.breadcrumb.interface.ts

export interface IBreadCrumb {
  label: string;
  url: string;
}

구성 부분

그리고 우리는 빵 부스러기 부품을 구축하기 시작할 수 있다.기본 코드 구조는 다음과 같다.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { IBreadCrumb } from '../../../interfaces/breadcrumb.interface';
import { filter, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
  public breadcrumbs: IBreadCrumb[]

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    this.breadcrumbs = this.buildBreadCrumb(this.activatedRoute.root);
  }

  ngOnInit() {
    // ... implementation of ngOnInit
  }

  /**
   * Recursively build breadcrumb according to activated route.
   * @param route
   * @param url
   * @param breadcrumbs
   */
  buildBreadCrumb(route: ActivatedRoute, url: string = '', breadcrumbs: IBreadCrumb[] = []): IBreadCrumb[] {
    // ... implementation of buildBreadCrumb
  }
}

보시다시피 우리는 두 가지 기능을 실현해야 합니다.ngOnInit() 는 구성 요소를 만들 때 즉시 터치하는 기능입니다.이 함수에서 우리는 현재 경로를 얻고 그 뿌리에서 빵 부스러기를 구축하기 시작할 것이다.buildBreadCrumb()는 우리가 실제로 빵 부스러기를 구축하는 함수다.루트 대상의 하위 대상을 루트에서 잎, 예를 들어 Dashboard에서 발표 로그까지 순환하는 귀속 함수입니다.

buildBreadCrumb（）

레이블 및 경로
우선, 우리는 빵 부스러기의 라벨과 경로를 하나씩 얻을 수 있다.만약 전류routeConfig가 뿌리에 있다면null은 route 일 수 있습니다.따라서 route.routeConfig.data.breadcrumb과route.routeConfig.path를 변수에 분배하기 전에 반드시 검사를 해야 한다. 그렇지 않으면 이상이 발생할 수 있다.

let label =
  route.routeConfig && route.routeConfig.data
    ? route.routeConfig.data.breadcrumb
    : "";
let path =
  route.routeConfig && route.routeConfig.data ? route.routeConfig.path : "";

동적 매개변수 처리
그 다음으로 우리는 동적 루트를 처리해야 한다. 예를 들어 :id.이 노선 좀 봐.

{
    path: 'issue-log/:id',
    component: IssueLogDetailComponent
    data: {
        breadcrumb: ''
    }
}

빵 부스러기는 경로가 동적이기 때문에 이전에 공백이었다.실행할 때만 ID를 알 수 있습니다.
활성화된 라우팅에는 실제 ID가 포함되어 있습니다. 따라서 마지막 라우팅 섹션을 가져와 :로 시작하는지 확인하여 빵 부스러기에 실제 ID를 동적으로 추가합니다.이 경우 동적 라우팅이 되고 route.snapshot.params 에서 실제 ID와 매개변수 이름paramName을 가져옵니다.

const lastRoutePart = path.split("/").pop();
const isDynamicRoute = lastRoutePart.startsWith(":");
if (isDynamicRoute && !!route.snapshot) {
  const paramName = lastRoutePart.split(":")[1];
  path = path.replace(lastRoutePart, route.snapshot.params[paramName]);
  label = route.snapshot.params[paramName];
}

다음 URL 생성

루트의 모든 귀속 순환에서 경로는 세그먼트로 나뉘어져 있으며, 예를 들어 issue-log 가 아니라 dashboard/it-helpdesk/issue-log 완전한 경로가 없다.따라서 완전한 경로를 재구축하고 현재 단계에서 빵 부스러기에 추가해야 한다.

const nextUrl = path ? `${url}/${path}` : url;

const breadcrumb: IBreadCrumb = {
  label: label,
  url: nextUrl
};

비어 있지 않은 태그와 귀속 호출이 있는 루트 추가

응용 프로그램에 빵 부스러기가 설정되지 않은 루트가 있을 수 있습니다. 생성기는 이 루트를 무시해야 합니다.
다음으로, 만약 현재 루트에 하위 루트가 있다면, 이것은 이 루트가 아직 잎 루트가 아니라는 것을 의미하며, 우리는 계속해서 다음 단계의 루트를 구축하는 데 귀속해야 한다.

const newBreadcrumbs = breadcrumb.label
  ? [...breadcrumbs, breadcrumb]
  : [...breadcrumbs];
if (route.firstChild) {
  //If we are not on our current path yet,
  //there will be more children to look after, to build our breadcumb
  return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
}
return newBreadcrumbs;

의 전모buildBreadCrumb()

/**
 * Recursively build breadcrumb according to activated route.
 * @param route
 * @param url
 * @param breadcrumbs
 */
buildBreadCrumb(route: ActivatedRoute, url: string = '', breadcrumbs: IBreadCrumb[] = []): IBreadCrumb[] {
    //If no routeConfig is avalailable we are on the root path
    let label = route.routeConfig && route.routeConfig.data ? route.routeConfig.data.breadcrumb : '';
    let path = route.routeConfig && route.routeConfig.data ? route.routeConfig.path : '';

    // If the route is dynamic route such as ':id', remove it
    const lastRoutePart = path.split('/').pop();
    const isDynamicRoute = lastRoutePart.startsWith(':');
    if(isDynamicRoute && !!route.snapshot) {
      const paramName = lastRoutePart.split(':')[1];
      path = path.replace(lastRoutePart, route.snapshot.params[paramName]);
      label = route.snapshot.params[paramName];
    }

    //In the routeConfig the complete path is not available,
    //so we rebuild it each time
    const nextUrl = path ? `${url}/${path}` : url;

    const breadcrumb: IBreadCrumb = {
        label: label,
        url: nextUrl,
    };
    // Only adding route with non-empty label
    const newBreadcrumbs = breadcrumb.label ? [ ...breadcrumbs, breadcrumb ] : [ ...breadcrumbs];
    if (route.firstChild) {
        //If we are not on our current path yet,
        //there will be more children to look after, to build our breadcumb
        return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
}

ngOnInit（）

마지막으로 우리는 빵 부스러기 구축을 시작하기 위해 ngOnInit()을 촉발해야 한다.
공유기 변경 이벤트가 감지되면 빵 부스러기 구축이 시작됩니다.이것을 검사하기 위해서 우리는 RxJs를 사용하여 변화를 관찰한다.

ngOnInit() {
    this.router.events.pipe(
        filter((event: Event) => event instanceof NavigationEnd),
        distinctUntilChanged(),
    ).subscribe(() => {
        this.breadcrumbs = this.buildBreadCrumb(this.activatedRoute.root);
    })
}

위의 코드 세션은 공유기 이벤트가 내비게이션할 이벤트 형식의 필터와 뚜렷한 변경을 통해 관찰된 것을 나타낸다.
경로가 변경되고 새 값이 이전 값과 다르면 빵 부스러기가 생성되기 시작한다는 뜻이다.귀속 함수의 결과는 this.breadcrumb 에 저장됩니다. 이 수조는 다음과 같습니다.

[
  {
    label: "Dashboard",
    url: "/dashboard"
  },
  {
    label: "IT Helpdesk",
    url: "/dashboard/it-helpdesk"
  },
  {
    label: "Issue Log",
    url: "/dashboard/it-helpdesk/issue-log"
  },
  {
    label: "plfOR05NXxQ1",
    url: "/dashboard/it-helpdesk/issue-log/plfOR05NXxQ1"
  }
];

결론

빵 부스러기는 상당히 간단한 알고리즘을 실현했지만, 나는 그것을 헷갈리게 하는 것은 그것의 배치라고 생각한다.개발자로서 어디서 설정해야 하는지, 그리고 Angular가 제공하는 기능을 알아야 합니다.Angular에 대한 깊은 이해를 통해 대부분의 도구가 Angular에서 제공되기 때문에 구성 요소를 쉽게 실현할 수 있습니다.
여기에서 전체 코드를 참조할 수 있습니다: GitHub
읽어주셔서 감사합니다~