Angular 2 条路线解析不同的组件

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 而不是重定向到不同的页面（我不想像 angular 2 文档建议的那样更改 url）。

有人知道怎么做吗？如果未通过解析器找到 productId 加载 NotFoundComponent 而不更改 url/navigate?

Answer 1

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

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

然后假设您的 NotFoundComponent 中有一个选择器，例如 'not-found-component' 将其放入调用服务的组件的模板中。

 <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 条路线解析不同的组件

Angular 2 routes resolve different component

javascript

typescript

angular2-routing

angular