Angular 基于http调用的角度路由

通常我使用这种路由在app-routing.module.ts中加载我的组件

const routes: Routes = [
{
path: '', component: HomeComponent
},
{
path: 'product-list', component: ProductListComponent
},
{
path: 'product', component: ProductComponent
}
];

但是，我希望基于http调用来确定要加载的组件

例如，我希望能够拥有以下URL：

/耐克

/nike Air Max

第一个URL应该加载产品列表页面，第二个URL应该加载产品页面

我有一个http调用来获取页面类型，它如下所示：

this.http.get(domain + 'api/ApiRoute?url=' + this.activatedRoute

（返回一个int值，但它可以返回我需要的任何内容）

问题1 我不知道如何从app-routing-module.ts调用服务（返回类型）

问题2

---

我不知道如何使用服务中的“类型”来确定路由

使用角度内置路由是不可能的，因为它的配置应该是静态的。您可以做的最好的事情是在

路径：':productName'

上创建自己的

SwitchComponent

，在那里您可以使用

*ngIf

s呈现所需的组件之一

 ngOnInit(){
   this.activatedRoute.params.pipe(
     switchMap((params) => this.myService.getComponentType(params['productName']))
   ).subscribe(type => this.componentType = type);
 }

.....
<product *ngIf="componentType == 'product'"></product>
<product-list *ngIf="componentType == 'product-list'"></product-list>

ngOnInit（）{
this.activatedRoute.params.pipe(
switchMap（（params）=>this.myService.getComponentType（params['productName']））
).subscribe（type=>this.componentType=type）；
}
.....

不可能使用角度内置布线，因为其配置应该是静态的。您可以做的最好的事情是在

路径：':productName'

上创建自己的

SwitchComponent

，在那里您可以使用

*ngIf

s呈现所需的组件之一

 ngOnInit(){
   this.activatedRoute.params.pipe(
     switchMap((params) => this.myService.getComponentType(params['productName']))
   ).subscribe(type => this.componentType = type);
 }

.....
<product *ngIf="componentType == 'product'"></product>
<product-list *ngIf="componentType == 'product-list'"></product-list>

ngOnInit（）{
this.activatedRoute.params.pipe(
switchMap（（params）=>this.myService.getComponentType（params['productName']））
).subscribe（type=>this.componentType=type）；
}
.....

您是对的，由于路由的静态性质，很难使用angular，但我相信这是可能的。实现这一点的一种方法是使用一个惰性路由，该路由实际上从一个静态url检索整个NG模块，该url实际上基于服务器端逻辑为不同的模块提供服务。诚然，这将是相当尴尬的，可能不值得麻烦。即使您干扰角度绑定并在后端设置正确的哈希逻辑，您也无法在路径之间导航。如果您已经下载了路径/backendGeneratedModule上的ProductModule，您将无法再打开ProductListModule，因为angular会认为该路径已经“缓存”了。事实上，我没有想到，您是绝对正确的。谢谢@AluanHaddad，我希望我不必这样做，但它是有效的：）@Marcus你的意思是把你的评论发给@Andrei吗？你是对的，因为路由的静态性质，很难使用angular，但我相信这是可能的。实现这一点的一种方法是使用一个惰性路由，该路由实际上从一个静态url检索整个NG模块，该url实际上基于服务器端逻辑为不同的模块提供服务。诚然，这将是相当尴尬的，可能不值得麻烦。即使您干扰角度绑定并在后端设置正确的哈希逻辑，您也无法在路径之间导航。如果您已经下载了路径/backendGeneratedModule上的ProductModule，您将无法再打开ProductListModule，因为angular会认为该路径已经“缓存”了。事实上，我没有想到，您是绝对正确的。谢谢@AluanHaddad，我希望我不必这样做，但它是有效的：）@Marcus你是想把你的评论发给@Andrei吗？