不同模板Angular4中的多个路由器出口

Question

我使用主 app.component.html 中的 router-outlet 标记登录，如果登录成功，我会导航到主页，这是一个不同的组件，由工具栏、侧导航和一个显示我的仪表板内容的区域组成。现在在我的主页中，我需要另一个路由器插座，它会在侧导航中选择选项时显示内容

我的项目结构是：

src

--login
----login.component.html
----login.component.ts
----login.component.css
--home-page
    dashboard
    --dashboard.component.html
    --dashboard.component.ts
----home.component.html
----home.component.ts
----home.component.css
--application-details
     app-overview
     --app-overview.component.html
     --app-overview.component.ts
----application.component.html
----application.component.ts
--users
----users.component.html
----users.component.ts

在我的app.component.html 中有以下内容

<router-outlet></router-outlet>

在login.componnet.ts

成功后this.route.navigate(['/home-page'])

在我的app-routing.module.ts

{ path:'', redirectTo:'/login',pathMatch:'full'},
{ path: 'login', component: LoginComponent},
{ path:'/home-page',component:HomePgaeComponent,
    children:[
         { path:'',component:DashboardComponent,outlet:'dashboard'},
         { path:'user',component:UsersComponent,outlet:'user'}, ]
   },

现在只要我根据成功条件登录就会触发页面 导航到这样的主页内的仪表板

    <tool-bar></tool-bar>    
    <div>
    <side-menu></side-menu> 
    <div class="main-content">

       <router-outlet name="dashboard"></router-outlet>
       <router-outlet name="user"></router-outlet>

    </div>
  </div> 

在这里，当我从侧导航单击用户选项时，它会附加仪表板 内容以及“用户”内容。我还有其他选项 第一次完美加载着陆页但是当我选择其他 side-nav options 所有其他内容都混在一起了。所以当我选择选项时 从侧面导航，相应的内容应加载到的内容区域 主页。另一种情况是当我导航到主页时，我需要导航 当我在仪表板组件中执行一些单击操作时到另一个页面。 我已经阅读了教程，他们在那里传递了一些 id 服务，我不知道该怎么做。据我所知，我知道 将出口名称传递给路由器出口将获取该内容 组件同样我提到的许多路由器 生成。

Answer 1

在这里，当我从侧导航单击用户选项时，它会附加 仪表板内容以及“用户”内容

 <router-outlet name="dashboard"></router-outlet>
 <router-outlet name="user"></router-outlet>

两者都是同一个组件的子组件

{ path:'/home-page',component:HomePgaeComponent,
    children:[
         { path:'',component:DashboardComponent,outlet:'dashboard'},
         { path:'user',component:UsersComponent,outlet:'user'}, ]
},

要么您使用相同的路由器插座来呈现仪表板和用户，要么您在仪表板内有用户路由器插座并且用户是仪表板的子级。