具有以下参数的页面的角度路由答案

【问题标题】：Angular routing with pages following parameters具有以下参数的页面的角度路由
【发布时间】：2019-02-01 19:58:31
【问题描述】：

我有一个 Angular 5 应用程序，我需要一个 URL 才能使用以下形式：

www.example.com/#/company/<companyId>/transactions

我正在使用未命名的路由器插座<router-outlet></router-outlet>

companyId 是一个参数。最初，我在路由器中保留了事务部分，并验证我可以正确访问与 CompanyTransactionsComponent 关联的事务页面。

路由器规则是：

www.example.com/#/company/<id>/
{ path: 'company/:companyId', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId);

效果很好，但是当我更改为添加 /transactions 时：

www.example.com/#/company/<id>/transactions/
{ path: 'company/:companyId/transactions', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId + '/transactions/');

这给了我一个错误Cannot match any routes.，所以我尝试了以下几个其他选项：

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent
        }
    ]
},

和：

RouterModule.forRoot([
    { path: 'company/:companyId', component: CompanyTransactionsComponent }
],
RouterModule.forChild([
    { 
        path: 'company/:companyId',
        children: [
            {
                path: 'transactions',
                component: CompanyTransactionsComponent
            }
        ]
    },
])

两者都给出相同的错误。这似乎只是因为我在参数 /:companyId 之后使用了 /transactions。知道如何在 url 中的参数后面创建一个子页面吗？

编辑 CompanyTransactionsComponent 用于父子页面，因为还没有 CompanyHomeComponent，所以在没有子页面的情况下，事务页面将是默认页面。除了 CompanyTransactionsComponent 之外，还有多个子组件我省略了以保持代码更短。

【问题讨论】：

标签： angular parameters angular-router routeparams route-parameters

【解决方案1】：

如果要路由到同一个组件，“子页面”的目的是什么？

此代码将允许您在 URL 中添加带有附加文本的路由。但是，如果您确实希望有一个“子页面”，它应该路由到不同的组件以显示该“子页面”。

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent  //<-- This should be the "sub page"
        }
    ]
},

另外，在定义children 属性时，您通常会在“父”组件的模板中添加第二个<router-outlet></router-outlet>。在此示例中，它将是 CompanyTransactionsComponent 模板。

如果您真的不需要显示另一条路线，那么应该这样做：

{ 
    path: 'company/:companyId/transactions', 
    component: CompanyTransactionsComponent,
},

【讨论】：

我们稍后将添加一个 CompanyHomeComponent，它将作为父级。为了简单起见，我遗漏了多个孩子。您列出的最后一个代码是我尝试的第一件事，这导致我尝试使用 children 属性。
最后一个语法应该有效。您是否尝试过 this.router.navigate(['/company', user.companyId, 'transactions']); 而不是 navigateByUrl？
这似乎有效，所以我没有尝试刷新页面，这将一直有效。但我觉得奇怪的是this.router.navigateByUrl('/company/' + user.companyId + '/transactions/'); 不起作用
实际上，刷新页面不起作用 - 我真的认为它确实有效，但是当我现在尝试它时，它总是给我同样的错误Cannot match any routes. URL Segment: 'company/<id>' - 它缺少 /transactions网址出于某种原因。我还意识到我提供的示例 URL 缺少哈希 /#/，因此我编辑了问题以将其添加到
你能用最少的代码构建一个简单的堆栈闪电战来演示你的错误吗？

【解决方案2】：

transactions 作为子路由应该可以工作。因为路径匹配始终是 url 的剩余部分。

const appRoutes: Routes = [{
    path: 'company/:companyId',
    component: CompanyTransactionsComponent,
    children: [
      {
        path: 'transactions',
        component: CompanyTransactionsComponent
      }
    ]
  }];

  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
      )
      // other imports here
    ],
  })

【讨论】：