Почему использование * ngIf = "authService.getUser ()" в моем компоненте приложения верхнего уровня html нарушает мой компонент входа? - PullRequest
Новая
       11

Почему использование * ngIf = "authService.getUser ()" в моем компоненте приложения верхнего уровня html нарушает мой компонент входа?

0 голосов
/ 31 мая 2019

Я новичок в Angular, поэтому, пожалуйста, потерпите мою наивность.Я создал компонент входа в систему, который я использую для предотвращения доступа к навигационным ссылкам маршрутизатора в главном html-компоненте приложения, пока пользователь не войдет в систему. Сам компонент входа является еще одной перенаправленной страницей, и я вместо этого хотел добавить компонент входа на свою главную страницу.и скрывать навигационные ссылки маршрутизации до тех пор, пока пользователь не войдет в систему.

Чтобы скрыть пользовательские навигационные ссылки в html-компоненте приложения, я попытался использовать * ngIf = "authService.getUser ()".

* ngIf = "authService.getUser ()" скрывает компоненты навигации до тех пор, пока пользователь не войдет в систему, как ожидалось, но неожиданно также не отобразил весь компонент входа в систему (поля пользователя и пароля икнопка отправки), за исключением первого текста, который просто говорит «ВХОД».Таким образом, пользователь не имеет возможности войти в систему.это app.component.html: 

  <app-login>

  </app-login>

<div class="page-header" >
   <div class="container">




      <div *ngIf="authService.getUser()" class="navLinks">
        <a  [routerLink]="['/home']"> Home</a>
        <a [routerLink]="['/about']"> About App</a>


        <a [routerLink]="['/login']">Login</a>
        <a [routerLink]="['/protected']">Protected</a>
    </div>


  </div>
</div>

<div id="content">
  <div class="container">
   <router-outlet></router-outlet>
  </div>
</div>

и это мои файлы компонентов входа в систему

login.component.ts: 

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  message: string;

  constructor(public authService: AuthService) {
    this.message = '';
  }

  login(username: string, password: string): boolean {
    this.message = '';
    if (!this.authService.login(username, password)) {
      this.message = 'Incorrect credentials.';
      setTimeout(function() {
        this.message = '';
      }.bind(this), 2500);
    }
    return false;
  }

  logout(): boolean {
    this.authService.logout();
    return false;
  }

}

login.component.html: 

<h1>Login</h1>

<div class="alert alert-danger" role="alert" *ngIf="message">
  {{ message }}
</div>

<form class="form-inline" *ngIf="!authService.getUser()">
  <div class="form-group">
    <label for="username">User: (type <em>user</em>)</label>
    <input class="form-control" name="username" #username>
  </div>

  <div class="form-group">
    <label for="password">Password: (type <em>password</em>)</label>
    <input class="form-control" type="password" name="password" #password>
  </div>

  <a class="btn btn-default" (click)="login(username.value, password.value)">
    Submit
  </a>
</form>

<div class="well" *ngIf="authService.getUser()">
  Logged in as <b>{{ authService.getUser() }}</b>
  <a href (click)="logout()">Log out</a>
</div>

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

Что в вашем authService.getUser() методе? Если он асинхронный, все, что вам нужно сделать, это *ngIf="(authService.getUser() | async)".

0 голосов
/ 31 мая 2019

Я не понимаю, почему вы используете * ngIf = "! AuthService.getUser ()" внутри компонента входа в систему, как это.

Семантически, цель этого компонента - использовать, когда вы не вошли в систему. Поэтому просто попробуйте обернуть ваш <app-login></app-login> в файле app.component.html в div с * ngIf = "! AuthService.getUser ()"

Как это: 

<div *ngIf="!authService.getUser()">
    <app-login></app-login>
</div>

Также я рекомендую вам не использовать метод обслуживания, подобный этому, в html, а вместо этого установить флаг, например isLogged init, в значение false и обновить его, когда пользователь успешно вошел в систему.

Ваш ng-if будет: * ngIf = "! IsLogged | async "

...