我是Angular的新手,我已经编写了用于使用Angular 5和springboot轻松登录到主屏幕工作流程的代码。在桌面视图中,看起来不错。但是,当我使用F12切换到移动视图时,每个模板都堆积在先前单击的模板上。 例如:登录屏幕显示在主屏幕下方。
我已经检查了我的app-route.module.ts和home-route.module.ts,如下所示。
app-route.module.ts
export const appRoutes: Routes = [
{
path: '',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
}
];
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(appRoutes,
{ useHash: true });
home-route.module.ts
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
app.component.html
<div>
<session-timeout-modal></session-timeout-modal>
<!-- side navbar -->
<div id="content" class="custom-container-width" [class.hide-
content]="!isNaviClose" [class.loginView]="!isLoggedInForView">
<!-- header -->
<app-header *ngIf="isLoggedInForView"></app-header>
<!-- <sidebar-nav [class.height-content]="isNaviClose"
*ngIf="isLoggedInForView" (logout)="logOut()"
[isLoggedInForView]="isLoggedInForView"
(sideBarChange)="naviChecker($event)"></sidebar-nav> -->
<div class="container container-icons-home " style="margin-left:100px"
*ngIf="isLoggedInForView">
<div class="row tile-container">
<div class="tile-art" routerLink="/">
<i class="fas fa-search fa-2x"></i>
</div>
<div class="tile-art" routerLink="/">
<i class="far fa-list-alt fa-2x"></i>
</div>
<div class="tile-art">
<confirm-modal-logout (logout)="logOut()"></confirm-modal-logout>
</div>
</div>
</div>
<!-- main contents -->
<div class="container-fluid inner-content login-container-height">
<router-outlet></router-outlet>
</div>
<app-footer *ngIf="isLoggedInForView"></app-footer>
</div>
</div>