Question

我的应用程序将Angular 2作为前端，将节点作为后端。

我试图将两个URLS / products和/ products /：id添加到我的app.routing.ts中：

{
    path: 'products',
    component: ProductsComponent,
    children: [
        { path: ':id',
          component: ProductDetailsComponent,
          canDeactivate: [CanDeactivateGuard]
        }
    ]
}

我可以正确访问：http://localhost:3000/products

但是，访问http://localhost:3000/products/1不起作用，它会将我带回http://localhost:3000/products页面，并在开发者控制台中显示以下错误：

"VM3964:55 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'ProductDetailsComponent'

这可能是什么问题？我在app.routing.ts中添加路径的方式是否犯了错误？

Answer 1

如果您正在制作儿童路线（在products下，因此在ProductsComponent下），则ProductsComponent模板需要有<router-outlet></router-outlet>。这告诉Angular将ProductDetailsComponent模板的内容放在ProductsComponent模板中的哪个位置。

但是，如果您不希望产品详细信息模板位于产品模板内，那么您不应将products/:id路由列为子路由，而应将其列为兄弟：

{ 
  path: 'products', 
  component: ProductsComponent,
},
{ 
  path: 'products/:id', 
  component: ProductDetailsComponent
  canDeactivate: [CanDeactivateGuard] 
}

Answer 2

这看起来像我的Pluralsight课程的例子。您是否在跟随其中一门课程时遇到麻烦？实例

您可以找到我的＆＃34; Angular Routing＆＃34;的代码。当然（https://app.pluralsight.com/library/courses/angular-routing）此处：https://github.com/DeborahK/Angular-Routing

APM-Final文件夹包含完整的应用程序代码。

在Angular 2 app.routing.ts中添加子组件路径时出错

2 个答案: