Question

我是Angular 2的新用户。我的应用程序使用2个模板，一个用于访客，另一个用于经过身份验证的用户。为此，我在 app.component.html

中进行了设置

<router-outlet name="header"></router-outlet>
<router-outlet name="left"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

在我的 app.routes.ts 文件中，我为经过身份验证的用户定义了这样的插座：

export const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: '' , component: HeaderComponent, outlet: 'header' },
    { path: '' , component: LeftComponent, outlet: 'left' },
    { path: '' , component: FooterComponent, outlet: 'footer' },
    ...
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

但是对于访客用户，在我的LoginComponent我希望按EmptyComponent替换出口组件：

{ path: '' , component: EmptyComponent, outlet: 'left' }

路线加载在 app.module.ts ：

中

import { routing } from './app.routes';

@NgModule({
  imports: [ 
    ...
    routing
  ],
  declarations: [ 
    AppComponent,
    HeaderComponent,
    LeftComponent,
    FooterComponent,
    LoginComponent
  ],
  providers: [
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

但我不知道该怎么做。我尝试使用@Routes指令但是我使用了angular-route-3.3.0并删除了该指令...

Answer 1

在您登录后可以eucl_dist，

initiallly，

   { path: '' , component: EmptyComponent, outlet: 'footer' }

登录后，

this.router.resetConfig([
       { path: '', component: MainComponent },
       ...
       { path: '' , component: FooterComponent, outlet: 'footer' } 
       ... 
    ]);

希望这会有所帮助!!

Answer 2

好的我解决了我的问题。感谢@Madhu的帮助。

1 - 我在app.routes

中导入默认路由（对于guest）

2 - 当用户登录时，我通过Madhu Ranjan回答

更新路线

3 - 然后我在app.module.ts中使用键entryComponents

添加第2点使用的组件列表

Angular 2 - 使用angular-route 3.3.0覆盖路由

2 个答案: