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

【问题标题】：How to use router-outlet from lazy loaded children module inside primary router-outlet如何在主路由器插座中使用延迟加载的子模块中的路由器插座
【发布时间】：2017-02-28 18:30:41
【问题描述】：

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

我在“main”组件中有一个主要的router-outlet，在“first”组件中有另一个router-outlet。

这里是主要组件的模板：

<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>

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

如果我在路由设置和 HTML 标记中将name 属性添加到内部路由器，我会得到 404 页面（由我创建），该页面加载到“app”组件中（在顶层结构）。

可能是什么问题？

【问题讨论】：

您是否将组件添加到您的惰性模块的导出中？
你的意思是在ngModule的ngModule的exports属性中添加属于第一个组件的“子组件”？
是的，组件需要导出到你正在使用的父组件的级别，App->Mod1->Mod2 (compShare)，现在你正在使用App(compShare)...从mod2 和 mod1
我要为插座使用命名吗？我的意思是使用name 属性。
我怀疑它，因为它是一个单独的模块。但是你需要在你使用组件的模块中配置路由

标签： angular url-routing angular2-routing angular2-template nested-routes

【解决方案1】：

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

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

因此，访问链接 main/first 将带您进入在主页的路由器插座中加载的第一页。关键是 main 需要定义要渲染的组件，如果组件内部有 <router-outlet>，则 main 的子级将被渲染。

【讨论】：

您的回答无效。他询问了延迟加载。