Question

我的Angular路由有什么问题？

我有以下网址：

/marketplace/promotions

然而，这给了我一个404：

/marketplace/promotions/create

APP-routing.module：

export const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        children: [
            { path: 'marketplace', loadChildren: 'app/feature/marketplace/marketplace.module#MarketplaceModule' },
        ]
    },
    { path: '**', component: NotFoundComponent },

marketplace.module

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '', redirectTo: 'promotions', pathMatch: "full"
            },
            {
                path: 'promotions', component: PromotionHomeComponent, pathMatch: "full",
                children: [
                    {
                        path: 'create', component: PromotionCreateComponent
                    }]
            },
        ]
    }

];

更新

我尝试从“促销”路径中删除路径匹配，当我尝试转到/ create url时，我会转到PromotionHomeComponent组件。

我的PromotionHomeComponent中没有routeroutlet。我希望它会使用主站点标题路由器插座？

404表示它重定向到我的NotFoundComponent。我已经更新了我的路由模块，以显示它是如何适应的。

我的控制台中没有错误或消息。

所有这些都是通过ng服务发生的 - 我所有的其他路线似乎都没问题

Answer 1

path: 'promotions', component: PromotionHomeComponent, pathMatch: "full"

删除pathMatch。

您是否将路由器插座放入PromotionHomeComponent？ 404究竟是什么意思？它是在您部署服务器后由服务器返回的，还是在您使用ng serve时返回的？什么是控制台日志？

Answer 2

如果您正在使用嵌套路由，即（在children属性中使用children属性）。您需要添加<router-outlet>标记 - 在您的情况下，您必须在文件marketplace.component.html和promotehome.component.html中使用它。通过这样做，您可以解决路由完成的问题。

但可能存在问题 - PromotionHomeComponent的内容将在PromotionHomeComponent和PromotionCreateComponent中显示。作为解决方案，您需要创建一个额外的组件以获得单个<router-outlet>标记。

请查看Angular 5 routerLink between parent component and other parent - child component

我的任务解决方案是将marketplace.module中的路由内容更改为：

const routes: Routes = [
        {
            path: '',
            component: MarketplaceComponent,
            children: [
                {
                    path: 'promotions', component: PromotionHomeComponent
                },
                {
                    path: 'promotions/create', component: PromotionCreateComponent
                }
            ]
        }

    ];

这样您就可以使用/marketplace，/marketplace/promotions和/marketplace/promotions/create

从任何地方访问它们

角度路由故障排除

2 个答案: