Angular 2 路由器，错误：无法激活已激活的插座

我想我根本无法理解 Angular 2 路由。我的应用程序中有这样的结构：

const routes: Routes = [
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'main',
        component: MainComponent,
        children:
        [
            {
                path: 'unit_list',
                component: ListViewComponent
            },
            {
                path: 'unit_info',
                component: UnitInfoComponent,
                children:
                [
                    {
                        path: 'patient',
                        component: PatientDetailsComponent
                    }
                ]
            }
        ]
    },
    {
        path: '',
        redirectTo: 'main',
        pathMatch: 'full'
    }
];

这是我的 app.module 的样子：

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MainModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginViewComponent
    ],
    bootstrap: [AppComponent]
})

和main.module

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        ListViewComponent,
        MainComponent,
        PatientDetailsComponent,
        UnitInfoComponent,
    ]
})

问题是我无法让 router.navigateByUrl 函数正常工作。

我在 PatientDetailsComponent 中有 ngOnInit() 函数，它检查病人是否为空，如果是则我称之为“this.router.navigateByUrl("/main/unit_info")”，但它在标题中抛出错误：“无法激活已激活的插座”。它在 Angular 2.1.1 中工作正常，但当我升级到 2.4.X 时，似乎没有一个能解决我的问题。我也不确定这个路由是否正确，因为我有点迷失。

这是升级到 2.4.X 之前我的整个路由的样子：http://pastebin.com/Y377STcW http://pastebin.com/Y377STcW

此错误可能是讨厌的红鲱鱼！

您可能会在 Chrome 控制台中看到类似以下内容：

 core.js:1440 ERROR Error: Uncaught (in promise): Error: Cannot
 activate an already activated outlet Error: Cannot activate an already
 activated outlet
     at RouterOutlet.activateWith (router.js:6676)
     at ActivateRoutes.activateRoutes (router.js:5765)
     at eval (router.js:5705)
     at Array.forEach (<anonymous>)
     at ActivateRoutes.activateChildRoutes (router.js:5704)

您将检查您的路线、提供商和 html，并且不会发现任何错误。

然后 - 如果你幸运的话，你会遇到这个答案！

您将在控制台窗口中向上滚动。您将看到真正的错误被推到屏幕顶部：

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'foo' of null
TypeError: Cannot read property 'foo' of null

然后查找与您的组件相对应的 .ts 文件，单击它，它将直接带您到出现实际错误的代码行。

换句话说，路由器无法承受组件构建过程中发生的错误。这ngInit方法可能有不同的结果 - 尚未测试。无论哪种情况，路由都很好:-)