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

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>

App.Module.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>

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

Open Login component as Separate Page

angular2-forms

angular

angular4-forms