时间戳

首页 > 解决方案 > 角登录页面

angular - 角登录页面

问题描述

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

这是显示的 index.html。蓝色字是导航和路由。

我正在尝试在不显示导航栏的情况下路由到登录页面。有可能这样做吗？

这是 index.html 和 app.component.html 的代码，以防万一

标签： angularauthenticationsticky

解决方案

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

实现此目的的一种方法是，当当前路线为 时，将导航栏从视图中移除/login。在 app.component.ts 中创建一个布尔属性，表示路由的当前状态是否为/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然后使用指令将此布尔属性绑定到导航栏。

在 app.component.html 中：

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

推荐阅读