javascript - 不同模板Angular4中的多个路由器导出

Question

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

我的项目结构是:

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

here when i click upon the user option from side-nav it appends dashboard content as well as "user" content

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

两者都是同一个组件的 child

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

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