Question

我正在创建一个Angular 2 RC5应用程序，并且每个模块都是延迟加载的。应用程序启动时，它会按预期显示LocalizationListComponent中的列表，但控制台中会显示Cannot find primary outlet to load 'LocalizationListComponent'的消息。考虑到显示列表并且错误抱怨组件是非常奇怪和不寻常的。

为了解决这个问题，我需要将<router-outlet>和ROUTER_DIRECTIVES一起添加到受此错误影响的每个组件和视图中。这样做的问题是列表将显示两次，详细信息屏幕将加载到此列表下。这不是我想要的行为。

在此之后，我通过angular.io上的Angular 2 Routing教程，检查了他们的plunker代码。一切似乎都是相同的，但错误仍然存在。

~~我已将应用程序上传到dropbox（inactive link）~~

以下是模块，路线和组件（我为长名单道歉）：

app.routes.ts

import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [
    {
        path: "",
        redirectTo: "/localizations",
        pathMatch: "full"
    },
    {
        path: "localizations",
        loadChildren: "./app/modules/localization/localization.module",
    }
];

export const appRoutes = RouterModule.forRoot(routes);

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { appRoutes } from "../routes/app.routes"

import { AppComponent } from "../components/app.component";
import { AppNavigationComponent } from "../components/app-navigation.component";
import { AppStartComponent } from "../components/app-start.component";

import { LoggerModule } from "./logging/logger.module";
import { SharedModule } from "./shared/shared.module";

@NgModule({
    imports: [ BrowserModule, LoggerModule.forRoot(), SharedModule, appRoutes ],
    declarations: [ AppComponent, AppNavigationComponent, AppStartComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {

}

app.component.ts

/// <reference path="../../typings/globals/node/index.d.ts" />

import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from "@angular/router";
import { AppNavigationComponent } from "./app-navigation.component";

import { LoggerMessageType } from   "../modules/logging/models/enums/LoggerMessageType";
import { AbstractLogger } from "../modules/logging/interfaces/AbstractLogger";

@Component({
    moduleId: module.id,
    selector: "vms-localization-app",
    templateUrl: "../views/app.component.html",
    directives: [ ROUTER_DIRECTIVES ]
})
export class AppComponent {
    status: string;

    constructor(private logger: AbstractLogger) {
        this.status = "Alpha 0.1";
    }

    ngOnInit() : any {

    }

    ngOnDestroy() : any {

    }
}

localization.module.ts

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { localizationRoutes } from "./routes/localization.routes";

import { LocalizationListComponent } from "./components/localization-list.component";
import { LocalizationDetailsComponent } from "./components/localization-details.component";

import { AbstractLocalizationService } from "./interfaces/AbstractLocalizationService";
import { MockLocalizationService } from "./services/mock-localization.service";

@NgModule({
    imports: [ localizationRoutes, CommonModule, FormsModule, RouterModule ],
    declarations: [ LocalizationListComponent, LocalizationDetailsComponent ],
    providers: [ { provide: AbstractLocalizationService, useClass: MockLocalizationService } ]
})
export default class LocalizationModule {

}

localization.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { LocalizationListComponent } from "../components/localization-list.component";
import { LocalizationDetailsComponent } from "../components/localization-details.component";

const routes: Routes = [
    {
        path: "",
        component: LocalizationListComponent,
        children: [
            {
                path: "localization",
                component: LocalizationListComponent
            },
            {
                path: ":id",
                component: LocalizationDetailsComponent
            },
            {
                path: "",
                component: LocalizationListComponent
            }
        ]
    }
];

export const localizationRoutes = RouterModule.forChild(routes);

定位-list.component.ts

import { Component, OnInit } from "@angular/core";
import { Localization } from '../models/localization';
import { Language } from "../models/language";

import { AbstractLocalizationService } from "../interfaces/AbstractLocalizationService";
import { AbstractLogger } from "../../logging/interfaces/AbstractLogger";
import { LoggerMessageType } from "../../logging/models/enums/LoggerMessageType";

@Component({
    moduleId: module.id,
    selector: "localization-list",
    templateUrl: "../views/localization-list.component.html"
})
export class LocalizationListComponent implements OnInit {
    localizations: Localization[];
    languages: Language[];

    constructor(private localizationService: AbstractLocalizationService,
            private logger: AbstractLogger) {

    }

    ngOnInit() : any {
        this.localizationService.getLocalizations()
            .subscribe((result: Localization[]) => {
                this.localizations = result;
                this.languages = this.localizations[0].languages;
            });
    }
}

app.component.html

<div class="container">
    <div class="page-header">
      <h1>VMS Localization<small>{{ status }}</small></h1>
      <app-navigation></app-navigation>
    </div>

    <router-outlet></router-outlet>
</div>

上述片段（以及提供的项目）一定有问题，但我看不到任何错误。

我还检查了StackOverflow上的其他问题，但它们主要处理我在app.component.ts中缺少的ROUTER_DIRECTIVES

感谢您的帮助！

Answer 1

我刚刚在GitHub上发现了一个问题（https://github.com/angular/angular/issues/10686），其中解释说这是一种故意行为。每个拥有children的父母（loadChildren似乎都一样）都必须拥有自己的插座来加载孩子。

似乎Router documentation

中的任何地方都没有记录这一点

更新：当您在模块的路由器中声明children时，每个父级必须拥有它自己的<router-outlet></router-outlet>才能加载这些子级。如何实现这取决于需求。对于我的解决方案，我创建了一个仅包含<router-outlet></router-outlet>的空组件，并将路由定义如下：

import { Routes, RouterModule } from "@angular/router"
import { SomeParentComponent } from "./app/modules/SomeModule/SomeParentComponent"
import { SomeChildComponent1 } from "./app/modules/SomeModule/SomeChild1Component"
import { SomeChildComponent2 } from "./app/modules/SomeModule/SomeChild2Component"

const routes: Routes = [
    path: "",
    component: SomeParentComponent,
    children: [
        {
            path: "",
            component: SomeChild1Component
        },
        {
            path: ":id",
            component: SomeChild2Component
        }
    ]
]

export const someModuleRoutes = RouterModule.forChild(routes);

这应该可以解决问题，因为主要组件路线将loadChildren指向SomeParentComponent。

找不到加载'LocalizationListComponent'的主要插座

1 个答案: