Question

在我的角度5项目中尝试为我的组件创建面包屑我遵循本指南https://medium.com/@bo.vandersteene/angular-5-breadcrumb-c225fd9df5cf

通过瘦面包只显示app-component.html文件，它不会显示在其他组件中...我想在某个组件中有beadcrumb。

喜欢：

export class BreadcrumbComponent implements OnInit {
    breadcrumbs$;
    // Build your breadcrumb starting with the root route of your current activated route
    constructor(private activatedRoute: ActivatedRoute,
                private router: Router) {
       this.breadcrumbs$ = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .distinctUntilChanged()
        .map(event => this.buildBreadCrumb(this.activatedRoute.root));

    }

    ngOnInit() {
    }

    buildBreadCrumb(route: ActivatedRoute, url: string = '',
                    breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
        // If no routeConfig is avalailable we are on the root path
        const label = route.routeConfig ? route.routeConfig.data[ 'breadcrumb' ] : 'Home';
        const path = route.routeConfig ? route.routeConfig.path : '';
        // In the routeConfig the complete path is not available,
        // so we rebuild it each time
        const nextUrl = `${url}${path}/`;
        const breadcrumb = {
            label: label,
            url: nextUrl
        };
        const newBreadcrumbs = [ ...breadcrumbs, breadcrumb ];
        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;
    }
}

HTML：

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async"
      class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url, breadcrumb.params]">
      {{ breadcrumb.label }}
    </a>
  </li>
</ol>

我将路由器事件移动到constructer以检测路由器更改，但它仍然在其他组件中没有显示任何内容 ..在他的代码中，如果我们转移到内容组件，它也不会显示任何内容。

我该如何解决这个问题？

Answer 1

此组件只能在app.component中使用，因为它正在侦听路由器事件。

在导航完成后创建app.component's <router-outlet>中创建的任何组件。因此，您的子组件无法做出反应的导航事件。

我建议您在breadcrumbs$中创建app.component流，然后重构您的痕量导线组件，将ActivatedRoute作为@Input()接受。

Answer 2

正如Tomasz Kula所说，至少在正常情况下，您不能订阅子组件中的任何导航事件。

您可以改为在其中创建带有Subject（最好使用BehaviorSubject）的服务，并在您的应用程序组件中订阅route事件，以保持更新主题。然后将服务注入子组件并订阅主题。

Answer 3

实际上，您不需要订阅应用程序组件中的路由事件。您需要做的就是创建全局可观察数据服务，该服务将侦听它们，然后在您的组件中使用它。如果它嵌套得很深，它将起作用。

类似的答案在这里：https://stackoverflow.com/a/36157392

角度5在某些组件中有面包屑

3 个答案: