如何在angular 2中对登录组件使用单独的布局？

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, data: { layout: 'login' } },
  { path: 'home', component: HomeComponent, data: { layout: 'main' } },
  // 其他路由配置...
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  // 其他模块导入和配置...
})
export class AppModule { }

import { Router, NavigationEnd } from '@angular/router';

export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const layout = this.getLayoutFromRouteData(event.urlAfterRedirects);
        this.setLayout(layout);
      }
    });
  }

  private getLayoutFromRouteData(url: string): string {
    const route = this.router.config.find(r => url.startsWith(r.path));
    return route ? route.data.layout : 'main';
  }

  private setLayout(layout: string): void {
    // 根据布局类型设置不同的布局组件
    // 例如，可以使用 ngIf 来切换布局组件
    this.isLoginLayout = layout === 'login';
  }
}