不使用Event Emmiter的Angular 2子對父溝通

Question

我有一個登陸頁面。 我需要從登錄頁面使用router.navigate（[./ app-login]）加載登錄組件。 登錄成功后，需要從同一登錄頁面使用router.navigate加載儀表板組件。 如何在沒有事件發射器的情況下將登錄成功傳達給登陸？

我的目標是使用Router.navigate從Landing視圖本身加載登錄和儀表板視圖。 有可能還是這是正確的方法？ 如果還有其他方法，請分享..

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，您必須實現AuthGuard才能說明應用程序授權的工作方式。

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

我想你明白了吧？

無論如何，Angular在路由器和防護裝置方面都有很好的文檔。 這就是解決問題的方法。