Показать крошки в дочерних компонентах - PullRequest
Новая
       26

Показать крошки в дочерних компонентах

0 голосов
/ 07 ноября 2019

У меня есть <app-breadcrumbs></app-breadcrumbs> в компоненте приложения. Но дизайнер решил показать хлебные крошки в компоненте в маткарте.

Я пытался переместить <app-breadcrumbs></app-breadcrumbs> в компонент, где мне нужно иметь хлебные крошки, но не работает .., потому что у меня нет детей. Что я могу сделать в этой ситуации. 

get node() {

    return this.activatedRoute.snapshot.children[0].url[1] && this.activatedRoute.snapshot.children[0].url[1].path === 'my-account' ?
      this.activatedRoute.snapshot.children[0].firstChild.firstChild : this.activatedRoute.snapshot.children[0];
  }

  ngOnInit(): void {
    this.load(this.breadcrumbsFromRoute(this.node));
    this.__subjectSub = this.appSettings.currentBreadcrumb$.subscribe(breadcrumbs => {
      this.load(breadcrumbs);
    });
    this.__routeSub = this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
      this.load(this.breadcrumbsFromRoute(this.node));
    });
  }

  load(breadcrumbs: any[]) {
   if (breadcrumbs && breadcrumbs.length) {
     if (!breadcrumbs[0]['name']) {
       this.breadcrumbs = [];
       this.pageTitle = '';
       return;
     }
      this.breadcrumbs = breadcrumbs;
      this.pageTitle = '';
      this.breadcrumbs.forEach(breadcrumb => {
        if (breadcrumb.name) {
          this.pageTitle += ' > ' + breadcrumb.name;
        }
      });
      this.currentBreadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
      if (!this.title.getTitle()) {
        this.title.setTitle(this.settings.name + this.pageTitle);
      }
    }
  }

  closeSubMenus() {
    if (window.innerWidth < 960) {
      this.sidenavMenuService.closeAllSubMenus();
    }
  }

  breadcrumbsFromRoute(node: ActivatedRouteSnapshot): Array<any> {
    const breadcrumbs = [];
    if (node.data['breadcrumb'] !== undefined) {
      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('/');
        if (node.params.name) {
          breadcrumbs.push({
            name: node.params.name,
            url: '/' + url
          });
        } else {
          breadcrumbs.push({
            name: node.data['breadcrumb'],
            url: '/' + url
          });
        }
      }
    }
    return breadcrumbs;
  }

Он отлично работает на компоненте приложения, но в дочернем компоненте я получил эту ошибку

Cannot read property 'url' of undefined

...