Question

我有一个目标网页。我需要使用router.navigate（[。/ app-login]）从登录页面加载登录组件。登录成功后，从同一登录页面我需要使用router.navigate加载仪表板组件。如何在没有事件发射器的情况下将登录成功告知登陆？

我的目标是从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']);
}

Answer 1

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

让我们说这是您的目标网页：

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

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

1 个答案: