Angular 登录页面

Question

我是 Angular 新手。我一直在 YouTube 上观看教程，所有教程都教如何使用粘性导航栏进行路由。是否可以单击链接并导航到没有导航栏的全新页面？

This is the index.html displaying. The blue words are navigation and are routed.

我正在尝试路由到登录页面而不显示导航栏。可以这样做吗？

Here is the code for the index.html and the app.component.html just in case its necessary

Answer 1

是的，可以导航到登录页面，但导航栏不会显示在该登录页面中。

实现此目的的一种方法是，当当前路线为 /login 时，从 View 中删除导航栏。在 app.component.ts 中创建一个 bool 属性，该属性将表示路由的当前状态是否为 /login。

app.component.ts 可能如下所示:

    import { Component } from '@angular/core';
    import { Router, NavigationEnd } from '@angular/router';
    import { filter } from 'rxjs/operators'; 

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

      isLoginPage: boolean;

      constructor(private router: Router) {
        this.router.events.pipe(
          filter(event => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {
          this.isLoginPage = this.router.url === '/login';
        });
      }
    }

然后使用 *ngIf 指令将此 bool 属性绑定(bind)到导航栏。

在app.component.html中:

    <div *ngIf="!isLoginPage" id="temporary-navigator style="text-align: center;">
      ... 
    </div>