如何在angular2中使用多个路由器插座？

我有一个主

路由器出口

，用于显示登录屏幕（

/login

）和主内容屏幕（登录后显示）（

/main

）

一旦用户进入内容屏幕，我想在顶部显示一个导航栏，有两个选项（比如“概述”、“见解”）。此导航条在

概览组件

和

透视组件

在此导航栏下方，我想显示另一个路由器出口，它将根据用户在导航栏中单击的内容加载

概览组件

或

InsightsComponent

。如果我给出“/overview”和“/insights”作为路线，它将直接向我显示相应的组件，而不是导航栏

以下是我当前的路由配置（不正确）：

请让我知道我们是否能在angular2 angular4实现这一点。我正在使用以下版本：

"@angular/core": "^4.0.0"
"@angular/router": "^4.0.0"
"@angular/cli": "1.0.1"

******************尝试2-仍然不工作******************

const appRoutes: Routes = [
  { path: 'main',
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

const appRoutes: Routes = [
  { path: 'main', component: MainComponent,
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

*******尝试2-所有组件的Sudo代码-仍不工作*******

//app.component.html

<router-outlet></router-outlet>


//app.module.ts

const appRoutes: Routes = [
  { path: 'main',
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

//login.component.html
<div class="text-center vertical-center">
    <form>
        <div class="horizontal">
            <label for="">Email</label>
            <input class="form-control" type="text" name="" value="">
        </div>
        <div class="horizontal">
            <label for="">Password</label>
            <input class="form-control" type="password" name="" value="">
        </div>
        <button class="btn btn-primary" (click)="navigate()">Login</button>
    </form>
</div>

//login.component.ts
navigate() {
    this.router.navigate(['./main']);
  }

//main.component.html

<app-header></app-header>
<router-outlet></router-outlet>


//app.header.html

<ul class="nav navbar-nav">
               <li class=""><a routerLink="/main/overview" routerLinkActive="active">OVERVIEW</a></li>
                <li class=""><a routerLink="/main/insights" routerLinkActive="active">INSIGHTS</a></li>
            </ul>

//overview.html
<p>This is overview section</p>

//insights.html
<p>This is insights section</p>

---

我想我收集到了你想要达到的目标。我建议您使用一个变量来模拟某种状态更改，并将其指定给组件视图。 让您的app.component.html仅包含路由器出口。 创建新的main.component.html以复制现有的component.html

`<app-header></app-header>`

概述内容

概述内容

然后，您可以将它们重构为单独的子组件

概述：

---

您正在使应用程序标题成为处理“链接”变量的全局组件。我建议您研究一下ngRx或通用应用程序状态方法。因为这是管理UI的一种很好的方法。

所以，如果我答对了问题，您希望在用户登录时显示登录屏幕，在用户登录后，您希望他看到/main，其中显示导航。登录屏幕和主应用程序应有不同的布局

我们有一个类似的案例，使用LayoutComponent。下面是一个简化的例子

// This is main component that get's bootstrapped that has 'top-level' router.
@Component({selector: 'app', template: '<router-outlet></router-outlet>'})
class AppComponent {}

// main router config
// Here AuthModule has router with login and logout configured and LoginGuard
// redirect the user to /auth/login when she is not authenticated.
// We're using lazy-loading but you can use direct component instead
export const APP_ROUTES: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: 'auth', loadChildren: '../modules/+auth/auth.module#AuthModule'},
  {
    path: '',
    component: LayoutComponent,
    canActivate: [LoginGuard],
    children: [
      {path: 'main', loadChildren: '../modules/+main/main.module#MainModule'}
    ]
  }
];

// AuthModule/LoginComponent has own template and it will be rendered
// into 'top-level' router-outlet.

// LayoutComponent
// Here you define your main application layout that can include navigation
// and anything else that are global to the app. It has another router-outlet
// that get rendered when the layout is accessible (which in this case when the user is authenticated).
@Component({
  selector: 'app-layout',
  template: `
    <div id="wrapper">
      <app-sidebar></app-sidebar>
      <div id="page-wrapper" class="gray-bg dashboard-1" adjust-content-height>
        <router-outlet></router-outlet>
      </div>
    </div>
    <notifications></notifications>
    <error-modal></error-modal>
  `
})
export class LayoutComponent {}

// Auth/LoginComponent can have its own template that will have different layout from the main application

//这是get引导的具有“顶级”路由器的主要组件。
@组件（{选择器：'app'，模板：'}）
类AppComponent{}
//主路由器配置
//在这里，AuthModule具有配置了登录和注销的路由器，以及LoginGuard
//当用户未通过身份验证时，将其重定向到/auth/login。
//我们使用延迟加载，但您可以使用直接组件
导出常量应用程序路径：路径=[
{路径：''，重定向到：'main'，路径匹配：'full'}，
{path:'auth'，loadChildren:'../modules/+auth/auth.module#AuthModule'}，
{
路径：“”，
组件：布局组件，
canActivate:[登录]，
儿童：[
{path:'main'，loadChildren:'../modules/+main/main.module#MainModule'}
]
}
];
//AuthModule/LoginComponent有自己的模板，将呈现该模板
//进入“顶级”路由器出口。
//布局组件
//在这里，您可以定义可以包含导航的主应用程序布局
//以及应用程序全局的任何其他内容。它有另一个路由器出口
//当布局可访问时（在本例中，当用户通过身份验证时）渲染的。
@组成部分({
选择器：“应用程序布局”，
模板：`
具有以下示例应用程序的存储库：


延迟加载路由
布局
还有其他事情
我可以看看main.component.html的样子吗？
无法通过在应用程序标题中添加routerLink来解决问题？如果它不起作用，您会遇到什么错误？-您可以使用特定代码编辑问题。这将非常清楚。-您有两个选项：您可以定义子路由器出口或辅助路由器出口路由器出口。有关更多信息，请参阅文档：嗨，Saiyaff，我在href之前尝试过routerLink，但也不起作用。没有引发错误。当我单击“概览”或“洞察”时，屏幕显示我概览或洞察组件，没有标题，标题显示在maincomponent中。感谢Verix的帮助，我现在可以使用它了。但是的，这是一个错误潜在的替代方案，我会尝试一下。太好了！若你们有时间的话，我想知道你们的解决方案？我正在做大量的状态管理和复杂的工作流，所以这对我来说是一个不错的选择。不过，我希望有一个替代方案可以应用！当然。我已经用我所有的尝试更新了我的问题（使用Sudo代码）。初始失败，然后上升！）但这很好，事实上，我希望我的视图得到延迟加载。我认为我上面的代码正在延迟加载。只有一个问题，就是主APP.component.ts中的
APP_ROUTES
（这就是代码中的内容）或者它是app.module.ts的一部分？我将app_路由保存在app.ROUTES.ts文件中，并在app.module.ts中使用它们。在回答了这个问题后，我开始认为将项目结构作为工作示例共享是一个很好的主意，可以在使用angular时利用很多好的东西。我知道有很多样板和初学者，但是其他人，我想按我的方式去做™" :) 我创建了repo，这是一个空atm机，但现在正在努力，几天后会有一些有用的东西。太棒了，谢谢你。是的，A2中有很多很酷的东西，很多人都不知道，有时很难找到片段。你的入门工具包肯定会帮助很多人。完成后一定要发表评论，这样我们所有人都可以上厕所再次感谢。我喜欢“你的方式”；）用示例应用程序更新了回购协议。这是正在进行的工作，我会不时用我将提出的功能或建议来更新它。我非常喜欢它
back to view.component.html 

// This is main component that get's bootstrapped that has 'top-level' router.
@Component({selector: 'app', template: '<router-outlet></router-outlet>'})
class AppComponent {}

// main router config
// Here AuthModule has router with login and logout configured and LoginGuard
// redirect the user to /auth/login when she is not authenticated.
// We're using lazy-loading but you can use direct component instead
export const APP_ROUTES: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: 'auth', loadChildren: '../modules/+auth/auth.module#AuthModule'},
  {
    path: '',
    component: LayoutComponent,
    canActivate: [LoginGuard],
    children: [
      {path: 'main', loadChildren: '../modules/+main/main.module#MainModule'}
    ]
  }
];

// AuthModule/LoginComponent has own template and it will be rendered
// into 'top-level' router-outlet.

// LayoutComponent
// Here you define your main application layout that can include navigation
// and anything else that are global to the app. It has another router-outlet
// that get rendered when the layout is accessible (which in this case when the user is authenticated).
@Component({
  selector: 'app-layout',
  template: `
    <div id="wrapper">
      <app-sidebar></app-sidebar>
      <div id="page-wrapper" class="gray-bg dashboard-1" adjust-content-height>
        <router-outlet></router-outlet>
      </div>
    </div>
    <notifications></notifications>
    <error-modal></error-modal>
  `
})
export class LayoutComponent {}

// Auth/LoginComponent can have its own template that will have different layout from the main application