2016-11-28 52 views
0

我有一个着陆页。我需要使用来自着陆页的router.navigate([./ app-login])加载登录组件。登录成功后,从同一登录页面我需要使用router.navigate加载仪表板组件。如何在没有事件发射器的情况下将登录成功进行通信登陆角2孩子对父母通信没有使用事件Emmiter

我的目标是使用来自Landing视图本身的router.navigate加载登录和仪表板视图。这是可能还是这是一个正确的方法? 如果有任何其他方式,请分享..

landing.component.ts

ngOnInit() { 
    //directly navigate to login if token expired/first login 
    this.router.navigate(['/app-login']); 
} 

loadDashdoard(){ 
    //load dashboard on success login 
    this.router.navigate(['/app-dashboard']); 
} 
+1

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

回答

0

你可以做,使用角路由器。它解决了家长/孩子的问题。

让我们说这是你的着陆页:

<h1>My Landing Page</h1> 
    <nav> 
    <a routerLink="/login" routerLinkActive="active">Login</a> 
    </nav> 
    <router-outlet>Your landing page/Login content will go here</router-outlet> 

<router-outlet>标签?这是路由内容将由路由加载的地方。

https://angular.io/docs/ts/latest/guide/router.html

在你的情况,你需要配置的着陆页面内容和登录组件都作为主着陆页的孩子。

const landingPageRoutes: Routes = [ 
    { 
    path: 'landing-page', 
    component: LandingPageComponent, 
    children: [ 
     { 
     path: '', 
     component: LandingPageContentComponent    
     }, 
     { 
     path: 'login', 
     component: LoginComponent    
     }, 
    ] 
    } 
]; 

您将需要一个单独的仪表板路由器。对于角度应用程序中的每组功能都有单独的路由器是很好的。在这里可以说DashboardRouter,你必须将CanActivate属性设置为一个AuthGuard,你必须实现它来说明你的应用程序的授权是如何工作的。

https://angular.io/docs/ts/latest/guide/router.html#guards

我猜你得到了点吧?

不管怎样,angular在路由器和警卫周围都有很好的文档。这是解决问题的途径。