Угловой 5 предмет в диалоге Материал 2 - PullRequest
Новая
       9

Угловой 5 предмет в диалоге Материал 2

0 голосов
/ 16 мая 2018

Я сталкиваюсь с этой странной ошибкой при реализации аутентификации для мобильной версии навигации в диалоге материала 2.

Я написал аутентификационную службу, которая заботится о проверке токена пользователя и сохранении результата втема: 

  userSignedIn$: Subject<boolean> = new Subject();

  constructor(public authService: Angular2TokenService) {

    this.authService.validateToken().subscribe(
      res => res.status == 200 ? this.userSignedIn$.next(res.json().success) : this.userSignedIn$.next(false)
    )
  }

далее, у меня есть функция для запуска мобильной навигации в виде диалога материала 2 (это совершенно отдельный компонент для мобильной навигации): 

 //the event listener is used to trigger the login/signup dialog and shouldn't be the problem here
 presentMobileMenuDialog(): void {
    let dialogRef = this.dialog.open(MobileMenuComponent, {
      height: '100%',
      width: '100%',
      maxWidth: '100vw',
      panelClass: 'deine-mutter'
    });

    const sub = dialogRef.componentInstance.onClick.subscribe(action => {
      this.presentAuthDialog(action)
    });
  }

далееДело в моем компоненте мобильного меню, здесь ничего особенного: 

export class MobileMenuComponent implements OnInit {
  onClick = new EventEmitter<string>();
  constructor(
    public dialogRef: MatDialogRef<MobileMenuComponent>,
    //initializing the authService which will be used in the html template
    public authService: AuthService,
    private router: Router,
  ) { }

  ngOnInit() {
  }

  closeMenu(){
    this.dialogRef.close()
  }

  //for triggering login and signup dialog (not part of the problem, but I left it just in case im missing something)
  presentAuthDialog(mode) {
    this.closeMenu()
    this.onClick.emit(mode)
  }

  //basic routing and closing the dialog
  forward(link){
    this.closeMenu();
    this.router.navigate([link]);
  }


  logout() {
    this.closeMenu()
    this.authService.logOutUser().subscribe(() => this.router.navigate(['/']));
  }

далее мы переходим к html-шаблону, в котором проблема: 

<div class="mobile-menu fluid-container">
  <div class="row">
    <div class="col-12 close">
      <mat-icon (click)="closeMenu()">close</mat-icon>
    </div>
    <div class="col-12 search">
      <app-search></app-search>
    </div>
    <div class="col-12 menu-items">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" id="coins" (click)="forward('/coins')">Coins</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"(click)="forward('/global')">Global Stats</a>
        </li>
        <li *ngIf="(authService.userSignedIn$ | async)" class="nav-item">
          <a class="nav-link" id="profile" (click)="forward('/profile')">Profile</a>
        </li>
        <li *ngIf="(authService.userSignedIn$ | async)" class="nav-item">
          <a (click)="logout()" class="nav-link">Logout</a>
        </li>
        <li *ngIf="!(authService.userSignedIn$ | async)" class="nav-item">
          <a class="nav-link" (click)="presentAuthDialog('login')" >Login</a>
        </li>
        <li *ngIf="!(authService.userSignedIn$ | async)" class="nav-item">
          <a class="nav-link" (click)="presentAuthDialog('register')">Register</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Итак, проблема у меня 'Я имею в виду, что независимо от того, вошел я в систему или нет, в меню всегда будут отображаться логин и регистрация.Что меня озадачивает, так это то, что я использую тот же аргумент authService и ngIf в настольной версии навигации, и он работает, как и ожидалось, с той лишь разницей, что он не реализован в диалоге материала 2.Я поэкспериментировал с этим довольно долго и попробовал следующее и всегда печатал ожидаемое логическое значение, однако шаблон внешнего интерфейса (измененный на * ngIf = "userLogedIn") не внес бы ожидаемых изменений. 

//shortend the class because this is getting way to long already
userLogedin: boolean = false;
  ngOnInit() {
    this.checkAuthStatus();
  }

  presentAuthDialog(mode) {
    this.dialogRef.close()
    this.onClick.emit(mode)
    this.checkAuthStatus()
  }

  logout() {
    this.dialogRef.close()
    this.authService.logOutUser().subscribe(() => this.router.navigate(['/']));
    this.checkAuthStatus();
  }

  checkAuthStatus(){
    this.authService.userSignedIn$.subscribe(data => {
      this.userLogedin = data;
      console.log(data)
    })
  }

Так что я довольно смущен, почему это происходит, и сожалею, что это стало так долго.

1 Ответ

0 голосов
/ 17 мая 2018

Так что получается при использовании BehaviorSubject в authService все работает как положено.Повторное чтение документации, безусловно, имеет больше смысла использовать BehaviorSubject.Я все еще не уверен, почему это работало для другой навигации, хотя.

Обновленный Сервис: 

 userSignedIn$ = new BehaviorSubject<boolean>(false);

  constructor(public authService: Angular2TokenService, private http: Http) {

    this.authService.validateToken().subscribe(
      res => res.status == 200 ? this.userSignedIn$.next(res.json().success) : this.userSignedIn$.next(false)
    )
  }
...