Angular 2 child to parent communication,不使用Event Emmiter

我有一个登陆页面 . 我需要使用router.navigate([ . / app-login])从登录页面加载登录组件 . 登录成功后,从同一登录页面我需要使用router.navigate加载仪表板组件 . 如何在没有事件 Launcher 的情况下将登录成功通

我的目标是从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)

3 years ago

你可以使用角度路由器来做到这一点 . 它解决了父/子问题 .

让我们说这是你的登陆页面:

<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有一个关于路由器和警卫的良好文档 . 这是解决问题的方法 .