Question

这是我的用例：

当我加载url / product / 123时，我想加载组件ProductComponent

这是我的设置：

RouterModule.forRoot([            
        {
            path: 'product/:productId',
            component: ProductComponent
        },
        {
            path: '**', component: NotFoundComponent
        },
    ]),

现在我添加了一个解析器来检查该产品ID是否存在，所以我的设置如下：

RouterModule.forRoot([            
        {
            path: 'product/:productId',
            component: ProductComponent,
            resolver: {
                productResolver: ProductResolver
            }
        },
        {
            path: '**', component: NotFoundComponent
        },
    ]),

我的解析器通过api调用检查该productId参数是否存在。我遇到的问题是，当找不到productId时，我想加载NotFoundComponent而不是重定向到不同的页面（我不想更改角色2文档建议的URL）。

任何人都知道该怎么做？如果没有通过解析器找到productId加载NotFoundComponent而不更改url / navigation？

Answer 1

不知道为什么你需要通过路由器设置加载你的组件，我把它放在试图从服务中获取它的组件内，然后如果它没有＆＃39 ; t得到一个结果返回切换一些控制是否显示NotFoundComponent的布尔值。下面有一些伪代码：

ngOnInit(){
    if (this.route.snapshot.params && this.route.snapshot.params['id']){
          myService.getTheThingById((success)=>{
                this.isFound = true;
                },(err)=> {
                      this.isFound = false;
          });
}

然后假设您的NotFoundComponent中有一个选择器，例如＆not;找不到组件＆＃39;将其放入调用该服务的组件的模板中。

 <not-found-component *ngIf='!isFound'></not-found-component>

Answer 2

我认为当您导航到NotFoundComponent时，您要做的就是跳过位置更改。我假设您已将Router注入您的解析程序，并在ID不存在时执行此类操作：

router.navigate(['someUrl']);

或者您可能正在使用navigateByUrl方法。无论哪种方式，您都可以告诉路由器not to change the URL：

router.navigate(['someUrl'], {skipLocationChange: true});

Answer 3

我曾经遇到过这个问题。

我所做的是，在组件中创建2个其他组件（在您的情况下，您有ProductComponent，NotFoundComponent，另一个您要导航到的组件，让我们说ArticleComponent）

然后我在主要组件中插入了2个组件：

<强> product.component.html

<app-notFound></app-notFound>
<app-article></app-article>

之后，在ngOnInit中，您会看到参数是否存在。如果他是，那么你将它记录在一个属性中，让我们说isParam = true。

您的模板变为

<app-notFound *ngIf="!isParam"></app-notFound>
<app-article *ngIf="isParam"></app-article>

它可能不是最好的解决方案，但它对我有用！

Angular 2路由解析不同的组件

3 个答案: