时间戳

首页 > 解决方案 > Angular 8 侧面导航以加载具有不同数据的相同组件

angular - Angular 8 侧面导航以加载具有不同数据的相同组件

问题描述

我有如下所示的组件 SideNavbar，两个链接都指向另一个组件 Page1。但是 Side1 和 Side2 都在调用相同的 Page1 组件。我的要求是单击 Side1 需要将一些参数传递给组件 Page1 并显示一些网格数据，然后单击 Side2 再次加载相同的组件 Page1 并将参数传递给组件并加载具有不同数据的相同网格。请让我知道如何从 SideNav 组件 Side1 和 Side2 单击调用相同的 Page1 组件方法。

SideNavBar 组件：

<a routerLink="/Page1" [routerLinkActive]="['router-link-active']" class="list-group-item"><i class="fa fa-calendar-plus-o"></i>&nbsp;<span>{{ 'Side1'}}</span></a>

<a [routerLink]="['/Page1']" [routerLinkActive]="['router-link-active']" class="list-group-item"><i class="fa fa-calendar"></i>&nbsp;<span>{{ 'Side2'}}</span></a>

标签： angular

解决方案

为什么不在queryParams 中传递信息。

案例 1：如果您使用的是 routerLink：

<a [routerLink]="['/page1']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

情况 2：如果路由是从一个方法完成的：

this.router.navigate(['/page1'], {queryParams:{prop: 'xxx'}});

在第一页组件中，订阅 queryParams：

ActivatedRoute.queryParams.subscribe(query => {
  console.log(query.prop)
});

为了在查询参数更改时重新加载路由，请添加runGuardsAndResolvers: 'paramsOrQueryParamsChange'到路由配置中。

  {
    path: "/page1",
    component: PageOneComponent,
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  }

推荐阅读