Par*_*shi 6 angular2-routing angular2-router3 angular2-modules angular
这是场景.我有一个UserConsoleModule和ShoppingCartModule.我有一个名为MyProfileComponent的组件.当你转到/ user-console时,你会看到MyProfileComponent,因此我把它放在UserConsoleModule的声明中.现在在/ shopping-cart/profile中,当用户退房时,我正在显示他的个人资料以确保每个信息都正常.所以我重用并将MyProfileComponent放在那里并在ShoppingCartModule中声明该组件.现在它说,组件是两个模块的一部分.我不知道为什么它有两个模块.他们是独立的.无论我重用哪些组件,我都声明在那个特定的模块中,我认为我很好,就像RC 5之前的声明一样.这个模块很好,但实际上却产生了很多混乱.
另一个问题是路线.我有一个AdminConsoleModule,我重用了UserConsoleModule和ShoppingCartModule.我做的是我在AdminConsoleModule的导入中导入了ShoppingCartModule.我/购物车重定向到/ shopping-cart/cart.因此,只要管理员控制台加载,它就会重定向到/ admin-console/cart.虽然它应该在路由器插座中加载UserResults.路由器很困惑.我在这里做错了吗?
作为解决方案的一部分,我制作了一个共享模块,它只包含购物车组件,其目的是在shopping-cart.module中导入shared-shopping-cart.module.ts和shopping-cart.routing.ts. ts,因此它仍然是分离的.但共享模块抛出一个错误,说路由器插座不称为我的shopping-cart.component.ts有路由器插座.
我的admin-console.routing.ts
const AdminConsoleRoutes: Routes = [
{path: '', component: AdminConsoleComponent,
children: [
{path: '', component:UserResultsComponent},
{path: 'search', component:UserResultsComponent},
{path: 'user-messages', component: MyMessagesComponent},
{path: 'user-profile', component: MyProfileComponent },
{path: 'user-progress', component: MyProgressComponent},
{path: 'user-receipts', component: MyReceiptsComponent},
{path: 'user-courses', component: MyCoursesComponent},
{path: 'group-membership', component: GroupMembershipComponent},
]
}
];
@NgModule({
imports:[RouterModule.forChild(ManageUserRoutes)],
exports:[RouterModule]
})
export class AdminConsoleRoutingModule{}
Run Code Online (Sandbox Code Playgroud)
我的AdminConsoleModule:
@NgModule({
imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule, AdminConsoleRoutingModule],
declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
exports:[]
})
export class AdminConsoleModule{}
Run Code Online (Sandbox Code Playgroud)
我没有导入my-profile和一切,因为UserConsole有这些组件.
UserConsoleModule
@NgModule({
imports: [CommonModule, ReactiveFormsModule, FormsModule, PrimeNGModule, UserProfileModule, MyProfileModule, UserConsoleRoutingModule, AddressModule, TranslateModule],
declarations: [
UserConsoleComponent,
MyMessagesComponent,
MyProgressComponent,
MyReceiptsComponent,
MyCoursesComponent,
GroupMembershipComponent,
MyCredentialsComponent,
TermsAndConditionComponent,
],
exports:[
MyMessagesComponent,
MyProgressComponent,
MyReceiptsComponent,
MyCoursesComponent,
GroupMembershipComponent,
MyCredentialsComponent,
TermsAndConditionComponent
],
providers:[]
})
export class UserConsoleModule { }
Run Code Online (Sandbox Code Playgroud)
ShoppingCartModule
@NgModule({
imports:[CommonModule, FormsModule, PrimeNGModule, MyProfileModule, ShoppingCartRoutingModule, AddressModule],
declarations: [
ShoppingCartComponent,
CartComponent,
ProfileComponent,
AffiliationComponent,
ShippingComponent,
PaymentComponent,
ConfirmComponent,
OrderCompleteComponent,
],
exports:[],
providers:[]
})
export class ShoppingCartModule { }
Run Code Online (Sandbox Code Playgroud)
购物,cart.routing.ts
const ShoppingCartRoutes: Routes = [
{path: '', component:ShoppingCartComponent,
children:[
{path: '', pathMatch:'prefix', redirectTo:'cart'},
{path:'cart', component:CartComponent},
{path:'profile', component:ProfileComponent},
{path:'affiliation', component:AffiliationComponent},
{path:'shipping', component:ShippingComponent},
{path:'payment', component:PaymentComponent},
{path:'confirm', component:ConfirmComponent},
{path:'order-complete', component:OrderCompleteComponent},
]
}
];
@NgModule({
imports:[RouterModule.forChild(ShoppingCartRoutes)],
exports:[RouterModule]
})
export class ShoppingCartRoutingModule{}
Run Code Online (Sandbox Code Playgroud)
在AdminConsoleModuel的导入中,如果我将UserConsoleModule放在ShoppingCartModule之前,那么它会转到admin-console/my-profile,因为我的UserConsoleRouting也有重定向.
这是user-console.routing.ts
const UserConsoleRoutes: Routes = [
{path:'', component: UserConsoleComponent,
children:[
{path: '', pathMatch:'full', redirectTo:'my-profile'},
{path: 'my-messages', component: MyMessagesComponent},
{path: 'my-profile', component: MyProfileComponent},
{path: 'my-progress', component: MyProgressComponent},
{path: 'my-courses', component: MyCoursesComponent},
{path: 'my-receipts', component: MyReceiptsComponent},
{path: 'my-credentials', component: MyCredentialsComponent},
{path: 'group-membership', component: GroupMembershipComponent}
]
}
];
@NgModule({
imports:[RouterModule.forChild(UserConsoleRoutes)],
exports:[RouterModule]
})
export class UserConsoleRoutingModule{}
Run Code Online (Sandbox Code Playgroud)
我认为,最终解决方案似乎为每个组件制作一个模块并将其导入到每个组件中.:p
| 归档时间: |
|
| 查看次数: |
2040 次 |
| 最近记录: |