在 Angular2 中设置子路由的问题

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'] }}
])

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

例外：路由器实例化期间出错！ （路由器链接-> 路由器）。 angular2.js:23887 例外：实例化过程中出错 路由器！ （RouterLink -> 路由器）。 angular2.js:23877:9

原始异常：“/”不允许子路由。使用“...” 父级的路由路径。

我尝试了任何我能想到的方法，但我被困在了这一点上。只是仍然没有足够的经验。

谢谢， 亚历克斯。

Answer 1

君特·佐赫鲍尔。

感谢您推动我创建 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 }

一切都像魅力一样！！！

谢谢，