没有页眉/面包屑/页脚的登录页面

Question

我将PrimeNG主题与Angular一起使用。我要创建登录组件，其中包含登录表单。我创建了组件：

ng generate component login

并添加到app.routes.ts：

import {Routes, RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {CampaignsOverviewComponent} from "./campaigns/campaigns-overview/campaigns-overview.component";
import {LoginComponent} from "./login/login.component";

export const routes: Routes = [
    {path: '', redirectTo: '/campaigns', pathMatch: 'full'},
    {path: 'campaigns', component: CampaignsOverviewComponent},
    {path: 'login', component: LoginComponent}
];

export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {
    useHash: true
});

当我转到“登录”页面时，我看到：

如您所见，我的组件已嵌入其中。但是，我需要在所有内容的顶部显示我的页面，以便该页面仅具有授权表单，而没有标题，菜单和其他内容。该怎么办？

Answer 1

您应该有单独的外壳组件AppLayoutComponent，该外壳组件具有诸如页眉，页脚，菜单等布局之类的内容，并且除登录组件外，所有组件都应注入该外壳组件中。

export const routes: Routes = [
{ 
path: '',
   component: AppLayoutComponent, 
   children: [
          { path: 'campaigns', component: CampaignsOverviewComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },
{ path: 'login', component: LoginComponent} ]

  

app-layout.component.html

<app-header></app-header>
<router-outlet></router-outlet>

  

app-layout.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-app-layout',
  templateUrl: './app-layout.component.html',
  styleUrls: ['./app-layout.component.css']
})
export class AppLayoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

作为参考，请参见此处的布局示例https://stackblitz.com/edit/angular-multi-layout-example-qhpupz

Answer 2

我认为您可以通过使用CSS轻松实现这一目标。

假设这是您的HTML代码 login.component.html 。我在主div上使用 loginLayout 类

<div class="loginLayout">
  <div class="textOnPage">
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" [(ngModel)]="userDetail.username">
        </div>
        <div class="form-group">
          <label for="pwd">Password</label>
          <input type="password" class="form-control" [(ngModel)]="userDetail.password">
        </div>
      </form>
    </div>
  </div>
</div>

只需要做的是，在您的 login.component.scss 中使用以下CSS属性 用于loginLayout类。

.loginLayout{
    background: #000;
    width:100%;
    height: 100%; 
    position:fixed;
    top:0;
    left:0;
    z-index:200;
}