Angular 2 - 使用 angular-route 3.3.0 覆盖路线答案

【问题标题】：Angular 2 - Override route with angular-route 3.3.0Angular 2 - 使用 angular-route 3.3.0 覆盖路线
【发布时间】：2016-12-12 18:35:37
【问题描述】：

我是 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 并且该指令已被删除...

【问题讨论】：

标签： javascript angular routes router

【解决方案1】：

您可以在如下登录后resetConfig，

最初，

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

登录后，

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

希望这会有所帮助！

【讨论】：

感谢您的回答。我在 app.routes 中导入所有 url，然后创建一个 user.component 定义新路由并调用 this.router.resetConfig 然后登录组件扩展 user.component 但 resetConfig 没有效果（控制台中没有错误）
我假设您先进入某个登录路径，然后在验证成功后更改 routconfig，然后导航回来？
哦，现在我在登录后调用resetConfig，然后再重定向用户。但现在我有这个错误：Unhandled Promise rejection: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<router-outlet name="header"></router-outlet> <router-outlet name="left"></router-outlet> <router-out"): AppComponent@0:0
你能用你的问题创建一个 Plunker 吗？

【解决方案2】：

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

1 - 我在我的 app.routes 中导入默认路由（用于访客）

2 - 当用户登录时，由于Madhu Ranjan 的回答，我会更新路线

3 - 然后我在 app.module.ts 中添加第 2 点使用的组件列表，键为 entryComponents

【讨论】：