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>

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

Answer 1

这里当我点击侧边导航的用户选项时，它会附加仪表板内容以及＆＃34;用户＆＃34;含量

 <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'}, ]
},

您使用相同的路由器插座来渲染仪表板和用户，或者您在仪表板内部有用户路由器插座，用户是仪表板的子项。

不同模板中的多个路由器插座Angular4

1 个答案: