如何在Angular 4中隐藏登录页面上的标题组件？

我对angular 4和angular material非常陌生，我仍处于学习阶段。 我正在尝试创建一个应用程序，用户可以在其中登录并导航到仪表板。 现在，我在仪表板中显示一个标题组件，并将其隐藏在登录页面中。 但当我刷新仪表板上的浏览器时，标题组件不会加载。 我曾经

现在我想不出解决办法。如果有任何帮助，我将不胜感激。 提前感谢

请在下面找到我的代码

应用程序模块.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { HttpModule } from '@angular/http';
    import { RouterModule, Routes } from '@angular/router';
    import 'hammerjs';
    import { NgxPhoneSelectModule } from 'ngx-phone-select';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { MatInputModule, MatButtonModule, MatSelectModule } from '@angular/material';
    import { MatGridListModule } from '@angular/material';
    import { MatTableModule } from '@angular/material';
    import { MaterialModule } from './modules/material/material.module';


    import { AppComponent } from './app.component';
    import { CustomerComponent } from './components/customer/customer.component';
    import { LoginComponent } from './components/login/login.component';
    import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
    import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
    import { DashboardComponent } from './components/dashboard/dashboard.component';

    import { FleetDataService } from './services/fleet-data.service';
    import { LoaderService } from './services/loader.service';
    import { HeaderComponent } from './components/header/header.component';
    import { AuthService } from './services/auth.service';
    import { AuthGuard } from './services/auth.guard';
    const appRoutes: Routes = [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'create-customer',
        component: CustomerComponent,
        //        canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: 'forget-password',
        component: ForgetPasswordComponent,
        //        canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
                  canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: '**',
        component: PageNotFoundComponent
      }
    ];

    @NgModule({
      declarations: [
        AppComponent,
        CustomerComponent,
        LoginComponent,
        ForgetPasswordComponent,
        PageNotFoundComponent,
        DashboardComponent,
        HeaderComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        HttpModule,
        RouterModule.forRoot(appRoutes),
        NgxPhoneSelectModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MatInputModule,
        MatButtonModule,
        MatSelectModule,
        MatGridListModule,
        MatTableModule,
        MaterialModule
      ],
      providers: [FleetDataService, LoaderService, AuthService, AuthGuard],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'app';
    }

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder, Validators } from '@angular/forms';
    // import { Router } from '@angular/router';
    // import { User } from '../../models/login.interface';
    import { AuthService } from '../../services/auth.service';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
    })
    export class LoginComponent implements OnInit {
      form: FormGroup;
      private formSubmitAttempt: boolean;
      constructor(private fb: FormBuilder,
        private authService: AuthService) {}
      ngOnInit() {
        this.form = this.fb.group({     // {5}
          userName: ['', Validators.required],
          password: ['', Validators.required]
        });
      }
      isFieldInvalid(field: string) {  // {6}
        return (
          (!this.form.get(field).valid && this.form.get(field).touched) ||
          (this.form.get(field).untouched && this.formSubmitAttempt)
        );
      }
      onSubmit() {
        if (this.form.valid) {
          this.authService.login(this.form.value); // {7}
        }
        this.formSubmitAttempt = true;
      }
    }

    import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import { AuthService } from '../../services/auth.service';
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {
      isLoggedIn$: Observable<boolean>;
      constructor(private authService: AuthService) { }

      ngOnInit() {
        this.isLoggedIn$ = this.authService.isLoggedIn; // {2}
      }
      onLogout() {
        this.authService.logout();                      // {3}
      }

    }

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

@Component({
  selector: 'app-dashboard',
  template: '<p>Yay! You are logged in!</p>',
  styles: []
})
export class DashBoardComponent {}

   export interface User {
   userName: string;
   password: string;
  }

  constructor (private zone: NgZone, private router: Router) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        if (event.url === '/login') {
          this.login= true;
        } else {
          this.login= false;
        }
      }
    });
  }

应用程序组件.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { HttpModule } from '@angular/http';
    import { RouterModule, Routes } from '@angular/router';
    import 'hammerjs';
    import { NgxPhoneSelectModule } from 'ngx-phone-select';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { MatInputModule, MatButtonModule, MatSelectModule } from '@angular/material';
    import { MatGridListModule } from '@angular/material';
    import { MatTableModule } from '@angular/material';
    import { MaterialModule } from './modules/material/material.module';


    import { AppComponent } from './app.component';
    import { CustomerComponent } from './components/customer/customer.component';
    import { LoginComponent } from './components/login/login.component';
    import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
    import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
    import { DashboardComponent } from './components/dashboard/dashboard.component';

    import { FleetDataService } from './services/fleet-data.service';
    import { LoaderService } from './services/loader.service';
    import { HeaderComponent } from './components/header/header.component';
    import { AuthService } from './services/auth.service';
    import { AuthGuard } from './services/auth.guard';
    const appRoutes: Routes = [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'create-customer',
        component: CustomerComponent,
        //        canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: 'forget-password',
        component: ForgetPasswordComponent,
        //        canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
                  canActivate: [AuthGuard] // ristrict direct access of links
      },
      {
        path: '**',
        component: PageNotFoundComponent
      }
    ];

    @NgModule({
      declarations: [
        AppComponent,
        CustomerComponent,
        LoginComponent,
        ForgetPasswordComponent,
        PageNotFoundComponent,
        DashboardComponent,
        HeaderComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        HttpModule,
        RouterModule.forRoot(appRoutes),
        NgxPhoneSelectModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MatInputModule,
        MatButtonModule,
        MatSelectModule,
        MatGridListModule,
        MatTableModule,
        MaterialModule
      ],
      providers: [FleetDataService, LoaderService, AuthService, AuthGuard],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'app';
    }

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder, Validators } from '@angular/forms';
    // import { Router } from '@angular/router';
    // import { User } from '../../models/login.interface';
    import { AuthService } from '../../services/auth.service';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
    })
    export class LoginComponent implements OnInit {
      form: FormGroup;
      private formSubmitAttempt: boolean;
      constructor(private fb: FormBuilder,
        private authService: AuthService) {}
      ngOnInit() {
        this.form = this.fb.group({     // {5}
          userName: ['', Validators.required],
          password: ['', Validators.required]
        });
      }
      isFieldInvalid(field: string) {  // {6}
        return (
          (!this.form.get(field).valid && this.form.get(field).touched) ||
          (this.form.get(field).untouched && this.formSubmitAttempt)
        );
      }
      onSubmit() {
        if (this.form.valid) {
          this.authService.login(this.form.value); // {7}
        }
        this.formSubmitAttempt = true;
      }
    }

    import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import { AuthService } from '../../services/auth.service';
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {
      isLoggedIn$: Observable<boolean>;
      constructor(private authService: AuthService) { }

      ngOnInit() {
        this.isLoggedIn$ = this.authService.isLoggedIn; // {2}
      }
      onLogout() {
        this.authService.logout();                      // {3}
      }

    }

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

@Component({
  selector: 'app-dashboard',
  template: '<p>Yay! You are logged in!</p>',
  styles: []
})
export class DashBoardComponent {}

   export interface User {
   userName: string;
   password: string;
  }

  constructor (private zone: NgZone, private router: Router) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        if (event.url === '/login') {
          this.login= true;
        } else {
          this.login= false;
        }
      }
    });
  }

app.component.html

    <div id="fullPage">
      <app-header ></app-header>
      <router-outlet></router-outlet>
    </div>

    <div class="fstBg container-fluid">
      <div class="row">
      <div class="col-md-12 logo pull-right"></div>
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="example-container">
              <mat-input-container>
                <input matInput placeholder="Username" formControlName="userName" required>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  User name cannot be empty
                </mat-error>
              </mat-input-container>
              <mat-input-container>
                <input matInput type="password" placeholder="Password" formControlName="password" required>
                <mat-icon matSuffix (click)="hide = !hide" ngClass="{{hide ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'}}"></mat-icon>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  Password cannot be empty
                </mat-error>
              </mat-input-container>
              <br /><br />
              <button type="submit" class="btn col-md-12  orange_btn" mat-raised-button>Login</button>

              <div class="bottom-div col-md-12 text-right pd0">       
                <a id="button_right" routerLink="forget-password" class="white_text hover_link link">Forget Password</a>
              </div>
              <br><br>
            </div>
          </form>
          </div>
        <div class="col-md-4">&nbsp;</div>
        </div>
    </div>

    <div class="row mrg0 hidden-xs" *ngIf="isLoggedIn$ | async as isLoggedIn">
      <div class="col-md-8 col-lg-8 col-sm-8">
        <div class="logo_div">
          <div class="logo" routerLink="user-management"></div>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 right_panel">
        <div class="row mrg0">
          <div class="col-md-6 col-lg-8 col-sm-6 text-right pd0 user_name"><i class="material-icons gray_icon user_name">person</i> <span>Hello Admin</span></div>    
          <div class="col-md-4 col-lg-4 col-sm-4 logout link" (click)="onLogout()" *ngIf="isLoggedIn"><a><i class="material-icons gray_icon clickable" matTooltip="Logout">exit_to_app</i>&nbsp;<span>Logout</span></a></div>
        </div>
      </div>
    </div>

<app-header *ngIf="showHead"></app-header>
<router-outlet></router-outlet>

<app-header *ngIf="!isLogin"></app-header>
<router-outlet></router-outlet>

header.component.html

    <div id="fullPage">
      <app-header ></app-header>
      <router-outlet></router-outlet>
    </div>

    <div class="fstBg container-fluid">
      <div class="row">
      <div class="col-md-12 logo pull-right"></div>
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="example-container">
              <mat-input-container>
                <input matInput placeholder="Username" formControlName="userName" required>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  User name cannot be empty
                </mat-error>
              </mat-input-container>
              <mat-input-container>
                <input matInput type="password" placeholder="Password" formControlName="password" required>
                <mat-icon matSuffix (click)="hide = !hide" ngClass="{{hide ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'}}"></mat-icon>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  Password cannot be empty
                </mat-error>
              </mat-input-container>
              <br /><br />
              <button type="submit" class="btn col-md-12  orange_btn" mat-raised-button>Login</button>

              <div class="bottom-div col-md-12 text-right pd0">       
                <a id="button_right" routerLink="forget-password" class="white_text hover_link link">Forget Password</a>
              </div>
              <br><br>
            </div>
          </form>
          </div>
        <div class="col-md-4">&nbsp;</div>
        </div>
    </div>

    <div class="row mrg0 hidden-xs" *ngIf="isLoggedIn$ | async as isLoggedIn">
      <div class="col-md-8 col-lg-8 col-sm-8">
        <div class="logo_div">
          <div class="logo" routerLink="user-management"></div>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 right_panel">
        <div class="row mrg0">
          <div class="col-md-6 col-lg-8 col-sm-6 text-right pd0 user_name"><i class="material-icons gray_icon user_name">person</i> <span>Hello Admin</span></div>    
          <div class="col-md-4 col-lg-4 col-sm-4 logout link" (click)="onLogout()" *ngIf="isLoggedIn"><a><i class="material-icons gray_icon clickable" matTooltip="Logout">exit_to_app</i>&nbsp;<span>Logout</span></a></div>
        </div>
      </div>
    </div>

<app-header *ngIf="showHead"></app-header>
<router-outlet></router-outlet>

<app-header *ngIf="!isLogin"></app-header>
<router-outlet></router-outlet>

---

您可以创建不带标题的登录组件。另一个组件带有头和路由器出口。成功登录后，重定向到具有页眉的组件。

将页眉和页脚放在app.componenent中，然后您可以管理它：检查此处

---

我知道我迟到了，但也许有一天，这会对某人有所帮助。 我已经开发了这个解决方案，它正在运行

在app.component.ts中有如下内容：

import { Component } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  showHead: boolean = false;

  ngOnInit() {
  }

  constructor(private router: Router) {
  // on route change to '/login', set the variable showHead to false
    router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        if (event['url'] == '/login') {
          this.showHead = false;
        } else {
          // console.log("NU")
          this.showHead = true;
        }
      }
    });
  }
}

在app.component.html中

    <div id="fullPage">
      <app-header ></app-header>
      <router-outlet></router-outlet>
    </div>

    <div class="fstBg container-fluid">
      <div class="row">
      <div class="col-md-12 logo pull-right"></div>
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="example-container">
              <mat-input-container>
                <input matInput placeholder="Username" formControlName="userName" required>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  User name cannot be empty
                </mat-error>
              </mat-input-container>
              <mat-input-container>
                <input matInput type="password" placeholder="Password" formControlName="password" required>
                <mat-icon matSuffix (click)="hide = !hide" ngClass="{{hide ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'}}"></mat-icon>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  Password cannot be empty
                </mat-error>
              </mat-input-container>
              <br /><br />
              <button type="submit" class="btn col-md-12  orange_btn" mat-raised-button>Login</button>

              <div class="bottom-div col-md-12 text-right pd0">       
                <a id="button_right" routerLink="forget-password" class="white_text hover_link link">Forget Password</a>
              </div>
              <br><br>
            </div>
          </form>
          </div>
        <div class="col-md-4">&nbsp;</div>
        </div>
    </div>

    <div class="row mrg0 hidden-xs" *ngIf="isLoggedIn$ | async as isLoggedIn">
      <div class="col-md-8 col-lg-8 col-sm-8">
        <div class="logo_div">
          <div class="logo" routerLink="user-management"></div>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 right_panel">
        <div class="row mrg0">
          <div class="col-md-6 col-lg-8 col-sm-6 text-right pd0 user_name"><i class="material-icons gray_icon user_name">person</i> <span>Hello Admin</span></div>    
          <div class="col-md-4 col-lg-4 col-sm-4 logout link" (click)="onLogout()" *ngIf="isLoggedIn"><a><i class="material-icons gray_icon clickable" matTooltip="Logout">exit_to_app</i>&nbsp;<span>Logout</span></a></div>
        </div>
      </div>
    </div>

<app-header *ngIf="showHead"></app-header>
<router-outlet></router-outlet>

<app-header *ngIf="!isLogin"></app-header>
<router-outlet></router-outlet>

---

如果您不了解

NavigationStart

，请转到

console.log（event）

，查看更多非常有用的信息。

以下是您可以使用的代码：

app.component.html

    <div id="fullPage">
      <app-header ></app-header>
      <router-outlet></router-outlet>
    </div>

    <div class="fstBg container-fluid">
      <div class="row">
      <div class="col-md-12 logo pull-right"></div>
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="example-container">
              <mat-input-container>
                <input matInput placeholder="Username" formControlName="userName" required>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  User name cannot be empty
                </mat-error>
              </mat-input-container>
              <mat-input-container>
                <input matInput type="password" placeholder="Password" formControlName="password" required>
                <mat-icon matSuffix (click)="hide = !hide" ngClass="{{hide ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'}}"></mat-icon>
                <mat-error *ngIf="isFieldInvalid('userName')">
                  Password cannot be empty
                </mat-error>
              </mat-input-container>
              <br /><br />
              <button type="submit" class="btn col-md-12  orange_btn" mat-raised-button>Login</button>

              <div class="bottom-div col-md-12 text-right pd0">       
                <a id="button_right" routerLink="forget-password" class="white_text hover_link link">Forget Password</a>
              </div>
              <br><br>
            </div>
          </form>
          </div>
        <div class="col-md-4">&nbsp;</div>
        </div>
    </div>

    <div class="row mrg0 hidden-xs" *ngIf="isLoggedIn$ | async as isLoggedIn">
      <div class="col-md-8 col-lg-8 col-sm-8">
        <div class="logo_div">
          <div class="logo" routerLink="user-management"></div>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 right_panel">
        <div class="row mrg0">
          <div class="col-md-6 col-lg-8 col-sm-6 text-right pd0 user_name"><i class="material-icons gray_icon user_name">person</i> <span>Hello Admin</span></div>    
          <div class="col-md-4 col-lg-4 col-sm-4 logout link" (click)="onLogout()" *ngIf="isLoggedIn"><a><i class="material-icons gray_icon clickable" matTooltip="Logout">exit_to_app</i>&nbsp;<span>Logout</span></a></div>
        </div>
      </div>
    </div>

<app-header *ngIf="showHead"></app-header>
<router-outlet></router-outlet>

<app-header *ngIf="!isLogin"></app-header>
<router-outlet></router-outlet>

---

我可以，但以后我创建的所有组件都必须在任何地方添加标题。我认为标题更像是一个单独的组件，并根据页面来命名。糟糕的想法。如果我有一个100页的网站呢？我手动将标题放在每个组件中？刷新后，你怎么能在仪表板上着陆，难道警卫不应该将你路由到

LoginComponent

？是的，现在它将我路由到登录，但我可以随时更改。我所要做的就是用“this.router.navigate（['/dashboard']）；”更新auth.guard，并检查从服务生成的auth令牌，而不是标记。那么现在有什么问题？我对你的评论有点困惑，关于你想要实现什么：）主要的问题是，只要我刷新observable标志，就会重置为false，这会让我注销。我无法找到如何刷新应用程序但不更改我观察到的状态。您需要使用一些东西在页面刷新时保留数据，例如

localStorage

或

ngrx store

以及

ngrx store localStorage

。迟到总比不到好。谢谢！2019年6月17日-仍在帮助：）谢谢！“订阅”而不是“forEach”怎么样this.router.events.subscribe（（e）=>{@Mr.WizardIt有效，请记住在页面重新加载时不会触发开始事件。因此，请使用结束事件或其他方法。