Показывать ссылки на заголовки при входе в систему angular 6

Question

Я новичок в angular 6. И я пытаюсь выполнить требование, при котором я загружаю заголовок, логин и нижний колонтитул при запуске приложения.

App.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<!-- Footer Selector-->
<app-footer></app-footer>

В AppComponent.TS я перехожу на страницу входа.Таким образом, при запуске приложения также отображается компонент входа в систему.

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


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

  showLinks = false;

  constructor(private _router: Router) {

  }

  ngOnInit() {
    this._router.navigate(['./login']);
  }

Итак, в AppHeaderComponent есть несколько ссылок на заголовки ( app-header-links ), которые должны отображаться толькопосле успешного входа.Но я не в состоянии понять это в достижении этого.Я попробовал его, используя @ Output () , но все еще не смог его достичь.

Header.component.html

div class="page-container">
  <div class="navbar navbar-inverse navbar-fixed-top megamenu" style="width: 100%; background-color: #9dbfe0 !important;">
    <div class="container" style="font-size:14px !important; display: block">
      <div class="navbar-header">
        <img src="Images/logo.png" style="float:left !important;" />
        <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>-->
        <!--</button>-->
      </div>
    </div>
    <app-header-links></app-header-links>
    <!--<a href="#" routerLink="/login"><span style="float: right !important; font-weight: bold;color: black"> Login </span></a>-->
  </div>
  <div id="main" class="navbar_Sitemap navbar-inverse-greyhead top-left">
    <div class="container" style="font-size: 11px !important;font-family: 'open sans';font-weight: bold !important;">
      <ol class="breadcrumb" style="background-color:#DCDCDC !important;">
        <li class="breadcrumb-item" style="color: black"
            *ngFor="let item of breadcrumbList; let i = index"
            [class.active]="i===breadcrumbList.length-1">
          <a [routerLink]="item.path" *ngIf="i!==breadcrumbList.length-1" style="color: black; font-weight: bold !important">
            {{ item.name }}
          </a>
          <span *ngIf="i===breadcrumbList.length-1"> {{ item.name }}</span>
        </li>
      </ol>
    </div>
  </div>
</div>

HeaderLinksComponent.TS

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

@Component({
  selector: 'app-header-links',
  templateUrl: './header-links.component.html',
  styleUrls: ['./header-links.component.css']
})
export class HeaderLinksComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Login.component.html

<div class="site__container" id="popup_box">
  <form class="form--login form-group"
        novalidate
        (ngSubmit)="onSubmit(txtUsernameTRV.value,txtPasswordTRV.value)"
        #loginForm>
    <div class="grid__container">
      <div class="form__field">
        <img src="Images/logo.png" />
      </div>
      <div class="form__field">
        <label class="fa fa-user" for="login__username"><span class="hidden">Username</span></label>
        <input type="text"
               class="form__input"
               id="txtUsername"
               placeholder="Username"
               required="required"
               ngModel name="txtUsername"
               #txtUsernameTRV="ngModel"
               (keyup)="logUserName(txtUsernameTRV.value)" />
        <br />
      </div>
      <div class="form__field">
        <label class="fa fa-lock" for="login__password"><span class="hidden">Password</span></label>
        <input type="text"
               placeholder="Password"
               class="form__input"
               required="required"
               autocomplete="off"
               id="txtPassword"
               ngModel name="txtPassword"
               #txtPasswordTRV="ngModel"
               (keyup)="logPassword(txtPasswordTRV.value)" />
        <br />
      </div>
      <div class="form__field">
        <button type="submit"
                class="btn btn-Orange btn-sm _btn"
                id="BtnSubmit"
                [disabled]="!(txtUsernameTRV.valid && txtPasswordTRV.valid)" routerLink="dashboard" >
          Login
        </button>
      </div>
    </div>
  </form>
</div>

Login.component.ts

onSubmit(txtUsername: string, txtPassword: string) {

    this._router.navigate(['./dashboard']);
  }

Существует ли подход для отображения ссылок заголовка приложения при входе в систему, иначе они не должныне будет отображаться.Может ли кто-нибудь помочь мне, пожалуйста, спасибо заранее

Answer 1

Я думаю, вы могли бы использовать службу для входа в систему

@Injectable({providedIn: 'root'}
exoprt class LoginService{
  logedin = false;

  login(){
    //some logic
    this.logedin = true
  }
}

в компоненте входа в систему

constructor(private login: LoginService){}
onSubmit(txtUsername: string, txtPassword: string) {
     this.loginService.login()
    this._router.navigate(['./dashboard']);
  }

и в компоненте HeaderLinksComponent

  constructor(public loginService: LoginService) { }
  ngOnInit() {
  }
}

и в ./header-links.component.html вы можете использовать ngIf="loginService.logedin"