首页 文章

角度路由故障排除

提问于
浏览 次
1

我的Angular路由怎么办？

我有以下URL工作：

/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
                    }]
            },
        ]
    }

];

Update

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

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

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

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

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

angular

2 回答

  • 0

    如果您使用嵌套路由，即（在子属性中使用children属性） . 您需要添加 <router-outlet> 标记 - 在您的情况下，您必须在文件marketplace.component.html和promotionhome.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 从任何地方访问它们

    回复于
  • 0
    path: 'promotions', component: PromotionHomeComponent, pathMatch: "full"

    删除 pathMatch .

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

    回复于

相关问题