angular - 将登录组件作为单独的页面打开

Question

我想单独打开登录页面。但它在routeroutlet页面内部打开。请帮忙。

PFB 下面的截图供您参考。

请参考下面我的代码。

App.Routing.ts ：

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const AppRoute: Routes = [
    { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' },
    { path: 'login', component: LoginCoHomeComponentmponent },
    { path: 'home', component: HomeComponent },

];

App.Component.html

<div id="wrapper">
   <app-top-bar></app-top-bar>
   <router-outlet></router-outlet>
</div>

应用模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SelectModule } from 'ng2-select';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

import { AppComponent } from './app.component';
import { SideBarComponent } from './components/side-bar/side-bar.component';
import { TopBarComponent } from './components/top-bar/top-bar.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

import { AppRoute } from './app.routing';
import { RouterModule } from '@angular/router';
import { Service } from './Service/service';
import { ConfigService } from './Service/config.service';
import { HomeComponent } from './components/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    SideBarComponent,
    TopBarComponent,
    DashboardComponent,
    RoleManagementComponent,
    UserManagementComponent,
    UserListComponent,
    LoginComponent,
    HomeComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(AppRoute),
    SelectModule,
    Ng2Bs3ModalModule,
    MyDatePickerModule
  ],
  providers: [{ provide: LocationStrategy, useValue: '/AAA', useClass: HashLocationStrategy }, Service, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.Componenet.html：修改

 <div id="wrapper">
   <router-outlet></router-outlet>
 </div>

Home.component.html 修改

<app-top-bar></app-top-bar>

app-top-bar 包含顶部菜单和侧边栏用户菜单。它是静态组件。

提前致谢。

Answer 1

在您的App.Component.html 中：更改为： <router-outlet></router-outlet>所以删除<app-top-bar></app-top-bar>

在App.Routing.ts 中：更改{ path: '', redirectTo: 'HomeComponent', pathMatch: 'full' }

至：

{ path: '', component: LoginComponent},
{ path: 'dashboard', component: DashboardComponent,
          children: [
             { path: 'page1', component: Page1Component},
             { path: 'page2', component: Page2Component}
          ]
}

在dashboard.component.html ：（主页）

<header-bar>
<side-bar>
<router-outlet></router-outlet>