[英]Using router-outlet in Angular 2
Below pseudo code describes my component tree structure. 下面的伪代码描述了我的组件树结构。
<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>
When user clicks "About" link , the About Component is displayed in "main" route-outlet , but my intention is to display it in "home" router-outlet, what needs to be modified to achieve that. 当用户单击“关于”链接时,“关于组件”将显示在“主”路由出口中,但我的意图是将其显示在“主”路由器出口中,需要进行修改才能实现此目的。
"app-root" component and "Home-component" are part of root module and "AboutComponent" is part of a feature module. “ app-root”组件和“ Home-component”是根模块的一部分,“ AboutComponent”是功能模块的一部分。
Root Module routing is as below.. 根模块路由如下。
RouterModule.forRoot([
{path:'' , component:LoginComponent },
{path:'home' , component:HomeComponent}
]),
and Feature module routing is as below... 功能模块路由如下...
RouterModule.forChild([
{path:'about' , component:AboutComponent }
])
follow this pattern for your routes. 遵循此路线模式。
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
}
]
}];
1: Don't nest content between < router-outlet> & < /router-outlet> "router-outlet" is kind of an i-frame in functionality. 1: 不要在<router-outlet>和</ router-outlet>之间嵌套内容。“ router-outlet”是一种i型框架。 It makes no sense putting content there, and have seen zero tutorials that do so. 将内容放在那里毫无意义,并且已经看过零篇教程。
2: If you have: < router-outlet name="MAIN_OUTLET_ID" > 2:如果您具有: <路由器出口名称=“ MAIN_OUTLET_ID”>
Then you need something like this in app.module.ts 然后,您需要在app.module.ts中添加类似内容
const appRoutes: Routes=[
{path: 'main', outlet:MAIN_OUTLET_ID, component:MainComponent},
/// ... more routes here ... ///
]
@NgModule({
...
imports: [
RouterModule.forChild([ appRoutes ]),
/// ... other imports here ... ///
],
...
})
NOTES: 笔记:
1: I use "MAIN_OUTLET_ID" in my example because it disambiguate the path from the id of the router-outlet. 1:在我的示例中,我使用“ MAIN_OUTLET_ID”,因为它使路径与路由器出口的ID保持一致。
<router-outlet name="home">
<a routerLink="about">About</a>
</<router-outlet>
you can try this way.your 'about' should be included in home. 您可以尝试这种方式。您的“关于”应该包含在家里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.