Question

我正在使用由jHipster生成的应用程序，并且正在尝试使导航系统像这样：

/ --> Site root (main.component). Redirects to /home.
  /home  (home.component)
  /admin (adm.component)
    /groups   (group.component)
    /contacts (contact.component)
  /questions (question.component)

这个想法是针对家庭，管理员和问题使用不同的布局。管理员的所有子级路由都必须具有相同的布局，但不能与家庭或问题相同。家庭和管理员的子级显示相同的工具栏。

使用Angular Router设置路线，我使用NavbarComponent类将admin指定为父组件，并使用AdminComponent组件，将工具栏指定为子插座“ navbar”。

我的问题是联系人在控制台中显示错误。网上论坛没有这个问题，并且显示正确。

我遇到的联系人错误是“路由'admin /'的配置无效：无组件的路由无法设置命名的出口集”。。

调试错误，我可以看到：

如果删除导航栏插座，则可以显示联系人，但没有工具栏。为了简洁起见，我仅将代码中最相关的部分包括在内。感谢您的帮助。

contact.route.ts

export const contactRoute: Routes = [{
    path: 'admin',
    component: AdminComponent,
    children: [
        {
            path: '',
            component: NavbarComponent,
            outlet: 'navbar'
        },{
            path: 'contact',
            component: contactComponent,
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: 'contactsApp.contact.home.title'
            },
            canActivate: [UserRouteAccessService]
        }, {
            path: 'contact/:id',
            component: contactDetailComponent,
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: 'contactsApp.contact.home.title'
            },
            canActivate: [UserRouteAccessService]
        }
    ]
}];

app.route.ts

import { Route, Routes } from '@angular/router';
import { JhiMainComponent } from './layouts';

export const mainRoute: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: '',
        component: JhiMainComponent
    }
];

main.component.html

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

home.component.html

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <jhi-footer></jhi-footer>
</div>

adm.component.html

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div class="card jh-card">
        <router-outlet></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

adm.component.ts

@Component( {
    selector: 'admin',
    templateUrl: './adm.component.html'
} )
export class AdminComponent  {
}

角路由器。嵌套路线中命名出口的问题

0 个答案: