如何在主路由器插座内使用延迟加载子模块的路由器插座

Question

正如我所说here我正在开发一个具有以下项目结构的Angular2应用程序：

我有一个主要router-outlet内部＆＃34;主要＆＃34;组件和另一个router-outlet内部＆＃34;第一个＆＃34;成分

以下是主要组件的模板：

<div class="ui menu vertical">
    <a class="item" *ngFor="let item of items" [routerLink]="[item.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{item.title}}</a>
</div>
<main>
    <router-outlet></router-outlet>
</main>

这是第一个子组件的模板：

<div class="ui secondary pointing menu">
    <a *ngFor="let item of menus" class="item" [routerLink]="[item.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{item.title}}</a>
    <router-outlet></router-outlet>
</div>

使用此配置，我得到主要组件中加载的第一个组件的页面，而不是第一个组件的页面。

如果我将name属性添加到内部路由器，无论是在路由设置还是在HTML标记中，我都会得到404页面（由我创建），该页面加载在＆＃34; app＆＃34;组件（在结构的顶层）。

可能是什么问题？

Answer 1

你能提供routing.module吗？可能你没有正确配置路线。 以下是工作示例：

{ path: 'main', component: MainComponent, , children: [
    {path: 'first',  component: FirstComponent },
    {path: 'second', component: SecondComponent }]

因此访问链接main / first将使您进入主页面路由器插座内的第一页。关键是主要需要定义要呈现的组件，如果组件内部有<router-outlet>，则会呈现main的子项。