6

这是场景。我有一个 UserConsoleModule 和 ShoppingCartModule。我有一个名为 MyProfileComponent 的组件。当您转到 /user-console 时，您会看到 MyProfileComponent，因此我已将其放在 UserConsoleModule 的声明中。现在在 /shopping-cart/profile 中，当用户结账时，我会显示他的个人资料以确保每个信息都正常。所以我重用并将 MyProfileComponent 放在那里，并在 ShoppingCartModule 中声明该组件。现在它说，组件是两个模块的一部分。我不知道为什么它在两个模块中会打扰。他们是独立的。无论我重用什么组件，我都会在那个特定的模块中声明它，我认为我就像 RC 5 之前的声明一样好。这个模块的东西很好，但实际上会造成很多混乱。

另一个问题是路线。我有一个 AdminConsoleModule，我在其中重用了 UserConsoleModule 和 ShoppingCartModule。我所做的是在 AdminConsoleModule 的导入中导入 ShoppingCartModule。我的 /shopping-cart 重定向到 /shopping-cart/cart。因此，一旦管理控制台加载，它就会重定向到 /admin-console/cart。虽然它应该在路由器插座中加载 UserResults。路由器很混乱。我在这里做错了吗？

作为解决方案的一部分，我制作了一个共享模块，它只包含购物车组件，其想法是在 shopping-cart.module 中导入 shared-shopping-cart.module.ts 和 shopping-cart.routing.ts。 ts，使其保持解耦。但是共享模块会抛出一个错误，说 router-outlet not known as my shopping-cart.component.ts 有 router-outlet。

我的 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{}

我的管理控制台模块：

@NgModule({
    imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule,  AdminConsoleRoutingModule],
    declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
    exports:[]
})

export class AdminConsoleModule{}

我没有导入我的个人资料和所有内容，因为 UserConsole 具有这些组件。

用户控制台模块

@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 { }

购物车模块

@NgModule({
    imports:[CommonModule, FormsModule, PrimeNGModule, MyProfileModule, ShoppingCartRoutingModule, AddressModule],
    declarations: [
        ShoppingCartComponent,
        CartComponent,
        ProfileComponent,
        AffiliationComponent,
        ShippingComponent,
        PaymentComponent,
        ConfirmComponent,
        OrderCompleteComponent,
    ],
    exports:[],
    providers:[]
})

export class ShoppingCartModule { }

购物车.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{}

在 AdminConsoleModuel 的导入中，如果我将 UserConsoleModule 放在 ShoppingCartModule 之前，那么它会转到 admin-console/my-profile，因为我的 UserConsoleRouting 也有重定向。

这是用户控制台.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{}

我认为，最终的解决方案似乎是为每个组件制作一个模块并在任何地方导入它。:p

4

0 回答 0