Question

我想为我的子组件设置默认组件。怎么做？这是我的router.ts

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder',
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder', //child has outlet
                component: ShellContentPlaceholderComponent,
                children : [
                    {
                        path: 'create', //need as default
                        component: ShellContentCreatePlaceholderComponent
                    }
                ]
            }

        ]
    }

添加请求

<div class="site-wrapper">
    <header-nav-shell></header-nav-shell>
    <div class="main-section">
        <div class="content-left"> //some times need to hide this, how?
            <side-nav-shell></side-nav-shell>
        </div>
        <div class="content-right">
            <router-outlet></router-outlet>
        </div>
    </div>
    <app-footer></app-footer>
</div>

Answer 1

只需为空白创建通配符即可重定向到默认组件

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder',
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder', //child has outlet
                component: ShellContentPlaceholderComponent,
                children : [
                    {
                        path: 'create', //need as default
                        component: ShellContentCreatePlaceholderComponent
                    },
                    {
                     path: '', // ?
                     redirectTo: 'create',
                     pathMatch: 'full'
                    },
                ]
            }

        ]
    }

或通过这种方式将redirectTo设置为{{1} {

ShellContentCreatePlaceholderComponent

如何在子组件中默认加载嵌套组件

1 个答案: