Html 在 Angular 2 中使用路由器插座
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40713246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using router-outlet in Angular 2
提问by refactor
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.
当用户点击“About”链接时，About 组件显示在“main”route-outlet 中，但我的目的是将它显示在“home”route-outlet 中，需要修改什么才能实现这一点。
"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 }
])
回答by Amit kumar
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
}
]
}];
回答by J.M.I. MADISON
1: Don't nestcontent between < router-outlet>& < /router-outlet>"router-outlet" is kind of an i-frame in functionality. It makes no sense putting content there, and have seen zero tutorials that do so.
1：不要在<router-outlet>和< /router-outlet>之间嵌套内容 “router-outlet”在功能上是一种 i-frame。将内容放在那里是没有意义的，并且已经看到零教程这样做。
2: If you have: < router-outlet name="MAIN_OUTLET_ID" >
2：如果你有：<router-outlet name="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 的歧义。
回答by xue.zhang
<router-outlet name="home">
<a routerLink="about">About</a>
</<router-outlet>
you can try this way.your 'about' should be included in home.
你可以试试这种方式。你的“关于”应该包括在家里。
