在Angular 2中使用router-outlet

发布时间：2020-12-17 10:24:18 所属栏目：安全来源：网络整理

导读：伪代码下面描述了我的组件树结构. app-root router-outlet name="main" Home-component a routerLink="about"About/a // router-outlet name="home" /router-outlet /Home-component/router-outlet/app-root 当用户单击“关于”链接时,将显示“关于组件” “

伪代码下面描述了我的组件树结构.

<app-root>  

<router-outlet name="main"> 

     <Home-component>       

        <a routerLink="about">About</a> //
        <router-outlet name="home"> </<router-outlet>

     </Home-component>

</router-outlet>

</app-root>

当用户单击“关于”链接时,将显示“关于组件”
“主要”路由器,但我的意图是将它显示在“家”路由器插座中,
需要修改什么来实现这一目标.

“app-root”组件和“Home-component”是根模块的一部分,“AboutComponent”是功能模块的一部分.

根模块路由如下.

RouterModule.forRoot([
    {path:'',component:LoginComponent },{path:'home',component:HomeComponent}
  ]),

和功能模块路由如下…

RouterModule.forChild([
    {path:'about',component:AboutComponent }
])

按照这种模式为您的路线.

export const routes: Route[] = [{
        path: '',redirectTo: "login",pathMatch: "full"
    },{
        path: 'login',component: LoginComponent
    },{
        path: 'csvtemplate',component: TemplateComponent,canActivate: ['canActivateForLoggedIn'],children: [{
            path: '',redirectTo: 'dashboard'
        },{
            path:'dashboard',component: DashboardComponent
        },{
            path: 'csvtimeline',component: CsvTimelineComponent
        },{
            path: 'addcategory',component: CsvAddCategoryComponent
        }
        ]
    }];

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!