时间戳

首页 > 解决方案 > Angular：如何在路由上声明条件组件

angular - Angular：如何在路由上声明条件组件

问题描述

我正在尝试以角度声明一个“动态”路由组件。

这是我的模块

const routes: Routes = [
  {
    path: ':machine', component: LayoutComponent,
    children: [
      {
        path: '', component: (() => {
          return IsServerCondition ? MonitoringServerComponent : MonitoringClientComponent;
        })()
      },      
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MonitoringRoutingModule { }

我想根据父路径路由的参数 :machine 更改要显示的组件。我该怎么做？

标签： angular

解决方案

如果您已经知道参数 :machine 的预定义值，您可以使用静态路由映射到每个组件

如果您需要发出网络请求，您当然可以使用发出网络请求的“虚拟”组件，然后根据来自后端的响应*ngIf or *ngSwitch来查看要加载的组件。

模板

<app-client-component *ngIf="serverCondition$ | async; else server"></app-client-component>
<ng-template #server>
    <app-server-component></app-server-component>
</ng-template>

打字稿

@Component({…})
export class DummyComponent implements OnInit {

    serverCondition$ = this.actRoute.paramMap.pipe(
        // for direct comparison
        map(params => param.get('machine') === 'red')
        // or for a network request result
        switchMap(params => this.service.checkBackend(param.get('machine'))),
        map(response => response === 'red')
    );
    constructor(
        private actRoute: ActivatedRouteSnapshot,
        private service: BackendService
    ) {}
}

推荐阅读