Question

我有3条路线，第一个路线包括两个孩子，第一个孩子正在渲染，但第二个孩子未渲染，在url中，我正在获取完整的地址，但没有模板显示，实际上它显示了其父模板，如果我添加了 router-outlet （路由器出口），则会呈现我不想要的两个地方。

这是第二条路线及其子路线：

const routes: Routes = [
    {
        path: 'temp-details',
        component: TempDetailsComponent,
        children: [
            {
                // The problem is here
                // This component not rendering in its parent TempDetails 
                path: 'temp-credit',
                component: TempCreditComponent,
                data: {
                    title: extract('Temp credit')
                }
            }
        ],
        data: {
            title: extract('Temp details')
        }
    }
];

这位于 temp-credit.routing.ts 中：

const routes: Routes = [
    {
        path: '',
        component: TempCreditComponent,
        data: {
            title: extract('Temp credit')
        }
    }
];

temp-details.module.ts

@NgModule({
    declarations: [TempDetailsComponent],
    imports: [
        CommonModule,
        TempDetailsRoutingModule,
        MaterialModule,
        TranslateModule,
        FlexLayoutModule,
        ReactiveFormsModule,
        PageHeaderModule,
        TempCreditModule,
    ],
})
export class TempDetailsModule { }

temp-credit.module.ts

@NgModule({
    declarations: [TempCreditComponent],
    imports: [
        CommonModule,
        TempCreditRoutingModule,
        TranslateModule,
        MaterialModule,
        ReactiveFormsModule,
        FlexLayoutModule,
        PageHeaderModule,
    ]
})
export class TempCreditModule { }

app.module.ts和temp-details.module.ts中都包含 TempCreditModule ，并且该组件已经在其自己的模块中声明。

该组件的面包屑如下所示：

Home > credits > temp-details > temp-credit

Answer 1

您必须在router-outlet中有一个TempDetailsComponent，因为这是渲染路径子级的地方。可能会发生，除了router-outlet中的TempDetailsComponent之外，什么都没有。

类似这样的东西：

const routes: Routes = [
    {
        path: 'temp-details',
        component: TempParentComponent, // <- this contains only a `router-outlet`
        children: [
            {
                path: '',
                component: TempDetailsComponent, // <- contains the actual page
                data: {
                    title: extract('Temp credit')
                }
            },
            {
                path: 'temp-credit',
                component: TempCreditComponent, // <- contains the actual page
                data: {
                    title: extract('Temp credit')
                }
            }
        ],
        data: {
            title: extract('Temp details')
        }
    }
];

Angular 8-儿童组件无法渲染

1 个答案: