Question

在面向用户身份验证后从Login组件重定向后，我遇到了一个angular2组件“Home”加载2次的问题。请在下面找到有关组件和路由的详细信息： -

我有一个Login组件，它是LOGIN_ROUTER_PROVIDERS的一部分。 LOGIN_ROUTER_PROVIDERS包含以下路线

const loginRoutes: Routes = [
        { path: '', component: Login },
        { path: 'login', component: Login },
        { path: 'Home', component: Home, pathMatch: 'full' },
        ...HOME_ROUTER_PROVIDERS
    ];
    export const LOGIN_ROUTER_PROVIDERS: ModuleWithProviders =    RouterModule.forRoot(loginRoutes);

我的登录组件由以下方法组成，该方法具有重定向到Home组件。

export class Login {
    ...
    public Login(userId, password)
    {
        //authenticate user and on sucessful authentication redirected to Home
         this.router.navigate(['/Home']);
    }

}

在登录/身份验证之后，在HOME_ROUTER_PROVIDERS中配置主组件和一些其他子级路由组件。

HOME_ROUTER_PROVIDERS包含以下路由配置

export const HOME_ROUTER_PROVIDERS: Routes = [
    {
        path: 'Home',
        component: Home,
        children: [
            { path: 'WorkbookList/:group', component: WorkbookList },
            { path: 'Workbook/:workbookID', component: Workbook },

            //some other child level routing components route
        ]
    }
];

主页组件如下

export class Home {
        constructor(private _SessionService: SessionService) {
            console.log("In constructor of Home - After Login route");
        }
    }

当执行应用程序并成功验证时，主组件正在加载，但在控制台上我可以注意到语句“在Home的构造函数 - 登录后路由”被打印2次。

我尝试在loginRoutes const中评论以下两行，但我收到错误消息“错误：无法匹配任何路由：'主页'”

{ path: 'Home', component: Home, pathMatch: 'full' },
...HOME_ROUTER_PROVIDERS

我在这里做的错误是什么以及为什么家庭组件加载2次？

我是否需要在单独的NgModule中使用loginRoutes和HOME_ROUTER_PROVIDERS？目前在我的设计中，两者都驻留在同一模块中，即所有组件都在同一模块中。在同一模块中的这个场景中，如何拥有2条不同的路由并从一个路由重定向到另一个路由？有什么想法吗？

Angular2组件在重定向后加载2次

0 个答案: