Question

在尝试组织整个结构时，我可以深入了解实际的业务逻辑，我遇到了以下问题。

我有主控制器定义了它的路线：

@Component({
  selector: 'priz-app',
  moduleId: module.id,
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader],
  providers: [AuthenticationService]
})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/login', name: 'Login', component: LoginComponent },
    { path: '/logout', name: 'Logout', component: LogoutComponent },
    { path: '/rrm/...', name: 'Rrm', component: RrmMainComponent }
])

并且该控制器的模板是：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <app-header></app-header>
            <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
        </div>
    </div>
</div>

正如您所看到的，其中包含app-header指令，如下所示：

@Component({
    selector: 'app-header',
    moduleId: module.id,
    templateUrl: './app-header.component.html',
    directives: [Collapse, DROPDOWN_DIRECTIVES, ROUTER_DIRECTIVES, TrackScrollDirective]
})

在其中的某个模板中：

<a [routerLink]="['RrmMain']">RRM <span class="sr-only">(current)</span></a>

其中RrmMainComponent看起来像这样：

@Component({
    selector: 'rrm-main',
    moduleId: module.id,
    templateUrl: './rrm-main.component.html',
    directives: [ROUTER_DIRECTIVES, SecureRouterOutlet]
})

@RouteConfig([
    {path: '/', name: 'RrmMain', component: RrmMainComponent, useAsDefault: true, data: { roles:['ROLE_RRM_USER', 'ROLE_RRM_USER'] }}
])

一切都很好，但我得到了一个例外：

EXCEPTION：在实例化路由器期间出错！（RouterLink - ＆gt;   路由器）。 angular2.js：23887 EXCEPTION：实例化期间出错   路由器！（RouterLink - ＆gt;路由器）。 angular2.js：23877：9

原始例外：＆＃34; /＆＃34;不允许使用子路线。使用＆＃34; ...＆＃34;上   父母的路线。

我尝试了任何我能想到的东西，但我现在陷入困境。只是仍然没有足够的经验。

谢谢，亚历克斯。

Answer 1

GünterZöchbauer。

感谢您推动我创建plunker。因为这让我意识到问题所在。

显然，在根路由配置中的父节点以及子节点配置中，我引用了相同的组件。一旦我创建了这样的包装组件：

@Component({
    selector: 'rrm',
    moduleId: module.id,
    templateUrl: './rrm.component.html',
    directives: [ROUTER_DIRECTIVES, SecureRouterOutlet]
})

@RouteConfig([
    {path: '/', name: 'RrmMain', component: RrmMainComponent, useAsDefault: true, data: { roles:['ROLE_RRM_USER', 'ROLE_RRM_USER'] }}
])

请注意，我在这里连接另一个组件，而不是自己。

并从应用程序组件中引用它：

{ path: '/rrm/...', name: 'Rrm', component: RrmComponent }

一切都像魅力一样！

谢谢，

在Angular2中设置子路由的问题

1 个答案: