Angular 2/4/5 - 将子组件加载到主路由器插座 [英] Angular 2/4/5 - Load child component to main router-outlet
问题描述
我目前正在使用角度5。我遇到了路由器配置问题及其相应的组件内容表示。以下是我的路由器配置。
I am working with angular 5 currently. I have came across the problem with my router configuration and its presentation of component content accordingly. As below is my router configuration.
const appRoutes: Routes = [
{ path: "", pathMatch: "full", redirectTo: "home" },
{
path: "home", component: HomeComponent
},
{
path: "applications", component: ApplicationsComponent,
children: [{
path: ":applicationId/privacysettingsforapplications", component: PrivacysettingsforapplicationsComponent,
children: [
{ path: "", pathMatch: "full", redirectTo: "services" },
{
path: "services", component: PrivacysettingsforapplicationservicesComponent
},
{
path: "data", component: PrivacysettingsforapplicationdataComponent
}]
}]
},
{
path: "devices", component: DevicesComponent,
},
];
我们有一个主< router-outlet>< / router- outlet>
其中angular加载其父组件的所有内容。这里 ApplicationsComponent
有一个孩子 PrivacysettingsforapplicationsComponent
又有两个孩子( PrivacysettingsforapplicationservicesComponent和PrivacysettingsforapplicationdataComponent
ie:服务和数据)。
We have one main <router-outlet></router-outlet>
in which angular loads all content of its parent component. Here ApplicationsComponent
has one children PrivacysettingsforapplicationsComponent
which in turn has two children(PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent
ie: service and data).
我想检查是否有任何加载方式( PrivacysettingsforapplicationsComponent
)主要< router-outlet>
上的孩子,而不是其直接父母< router-outlet>
即。 ApplicationComponent
的。我检查过的一种方法是将子组件作为对等组件放入父组件,但我的breadcrumb模块不能识别该组件的真正父组件 PrivacysettingsforapplicationsComponent
。
I want to check that is there any way to load(PrivacysettingsforapplicationsComponent
) children on main <router-outlet>
instead of its immediate parent <router-outlet>
ie. ApplicationComponent
's. One way I have checked is to put child component as peer to parent component but then my breadcrumb module does not identify who is the real parent of that component PrivacysettingsforapplicationsComponent
.
推荐答案
路径:applications /:applicationId / privacysettingsforapplications
将此替换为以下路径
路径::applicationId / privacysettingsforapplications
这篇关于Angular 2/4/5 - 将子组件加载到主路由器插座的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!