角度路由疑难解答答案

【问题标题】：Troubleshooting Angular routing角度路由疑难解答
【发布时间】：2018-02-13 08:01:15
【问题描述】：

我的 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 中没有路由器插座。我希望它会使用主站点标头路由器插座？

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

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

这一切都是通过 ng serve 发生的——我所有的其他路线看起来都还可以

【问题讨论】：

没有路由器出口就无法工作，这就是子路由的全部目的，创建从父路由继承的骨架和嵌套路由。
哦，那么我该如何实现我想要做的事情呢？不使用子路由？
如果它没有从 PromotionHomeComponent 继承模板，那么它不是一个嵌套的子组件，如果您希望该特定路径指向创建组件，只需编写整个路径promotions/create
谢谢，出于某种原因，我认为路径中不能有“/”...！

标签： angular

【解决方案1】：

如果您使用的是嵌套路由，即（在子属性中使用子属性）。您需要添加一个<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 从任何地方访问它们

【讨论】：

【解决方案2】：

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

删除pathMatch。

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

【讨论】：