Angular страница входа

Question

Я новичок в Angular. Я смотрел обучающие программы на YouTube, и все они обучают маршрутизации с помощью липкой панели навигации. Можно ли щелкнуть ссылку и перейти на совершенно новую страницу без панели навигации?

Это индекс. html отображение. Синие слова обозначают навигацию и маршрут.

Я пытаюсь перейти на страницу входа без отображения панели навигации. Возможно ли это?

Вот код индекса. html и app.component. html на всякий случай

Answer 1

Да, можно перейти на страницу входа и панель навигации не будет отображаться на этой странице входа.

Один из способов добиться этого - удалить панель навигации из поля зрения, когда текущий маршрут /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.

In app.component. html:

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

Answer 2

Вы можете добиться этого, удалив тег <app-nav-menu></app-nav-menu> из app.component. html и добавив его к отдельным компонентам, которым требуется навигационное меню.

При этом навигационное меню не будет включено в маршрутизируемые компоненты, если вы не добавите его в компонент