Angular 2路由器，错误:无法激活已经激活的插座 [英] Angular 2 router, Error: Cannot activate an already activated outlet

问题描述

我认为我完全不了解Angular 2路由.我的应用程序中已包含此结构:

I think I can't understand Angular 2 routing at all. I've got this structure in my app:

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的外观:

Here is how my app.module is looking:

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

和main.module

And main.module

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

问题是我无法管理get router.navigateByUrl函数正常工作.

The problem is I can't manage get router.navigateByUrl function to work.

我在PatientDetailsComponent内具有ngOnInit()函数，该函数检查Patient是否为null，如果是，则将其称为"this.router.navigateByUrl("/main/unit_info")，但标题中出现了错误: 无法激活已经激活的插座".在Angular 2.1.1中它可以正常工作，但是当我升级到2.4.X时，似乎都无法解决我的问题.我也不确定此路由是否正确，因为我有点迷路.

I have ngOnInit() function inside PatientDetailsComponent which checks if patient is null, if is then I call this "this.router.navigateByUrl("/main/unit_info")", but it throws me the error in the title: "Cannot activate an already activated outlet". It was working fine in Angular 2.1.1, but when I upgraded to 2.4.X none seems to fix my problems. I am also not sure if this routing is correct, because I am a little lost.

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

This is how my whole routing was looking before upgrading to 2.4.X: http://pastebin.com/Y377STcW

推荐答案

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

您将在Chrome控制台中看到以下内容:

You'll see something like this in the Chrome console:

 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，不会发现任何错误.

You'll go and check your routes and your providers and your html, and you won't find anything wrong.

然后突然您会记住这个答案！

And then suddenly you will remember this answer!

然后您将在控制台窗口中向上滚动.然后，您将看到真正的错误被推离屏幕顶部:

And you will scroll up in the console window. And you will see the real error which was pushed off the top of the screen:

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

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

Then look for the .ts file that corresponds to your component, click on it and it'll take you right to the line of your code with the error.

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

In other words the router cannot survive an error that occurs during construction of your component. The ngInit method may have different results - haven't yet tested. In either case the routing is just fine :-)

这篇关于Angular 2路由器，错误:无法激活已经激活的插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！