Question

我正在尝试将我的路由系统从Beta / RC1样式（@ angular / router-deprecated）迁移到RC4中可用的样式（@ angular / router）。

看起来很简单，除了我一直挂着父路由器组件和子节点的概念。在我的路由器的父路径中定义的实际组件似乎永远不会为我的某些路径显示它的模板。该父级是一个包装器，其中包含的内容包括新的<router-outlet>

我的信息中心路由工作正常。它最初加载成员资格子项，DashboardComponent中包含的包装内容显示，允许导航到每个子项。

export const DashboardRoutes: RouterConfig = [
    {
        path: "dashboard",
        component: DashboardComponent,
        children: [
            { path: "", redirectTo: "membership" },
            { path: "executive", component: ExecutivePanelComponent },
            { path: "membership", component: MembershipPanelComponent }
        ]
    }
];

但是在我网站的另一个可导航区域，它的工作方式不同。它只是呈现一个空白屏幕，虽然浏览器中的URL显示正确。没有显示ReportCatalogComponent的内容。

export const ReportCatalogRoutes: RouterConfig = [
    {
        path: "catalog",
        component: ReportCatalogComponent,
        children: [
            { path: "", component: EmptyComponent },
            //{ path: "report/:id", component: ReportDetailsComponent, data: { create: false } },
            { path: "report", component: ReportDetailsComponent, data: { create: true } }
        ]
    }
];

我究竟能在这里做错什么？

Answer 1

因此，在进一步挖掘和尝试简化问题之后，我想我已经遇到了这个原因。

我的父路径中包含了一个指令，引用如下。

import { ReportTileComponent } from "./index";

解决这个问题的解决方案，至少在删除所有其他潜在问题后，似乎是直接引用该组件。

import { ReportTileComponent } from "./main/report-tile.component";

这样做的原因让我非常困惑，但它解决了我的问题。

路由器没有生成父组件的模板？

1 个答案: