Angular обновление страницы после входа в систему

Question

Я новичок в Angular и хочу перезагрузить страницу после успешного входа и перенаправить на домашнюю страницу.

Так выглядит моя функция входа в систему.

login() {
    if (this.loginForm.valid) {
      this.user.login_user(JSON.stringify(this.loginForm.value))
      .subscribe(
        data => {  window.location.reload(); this.router.navigate(['']); },
        error => console.log(error)
      );
    } else {
      console.log('Invalid form');
    }
  }

Это решение возвращает меня на страницу входа, но кнопка входа в систему на панели навигации успешно заменена на кнопку выхода из системы. Без этого window.location.reload() я перенаправляюсь на домашнюю страницу, но мне нужно вручную обновить страницу sh, чтобы изменить кнопку с входа в систему.

Answer 1

Вы должны реализовать что-то подобное в своей пользовательской службе:

@Injectable()
class UserService() {

    private _isLoggedIn = new BehaviorSubject<boolean>(false);

    login_user(form: string) {
        // Call this._isLoggedIn.next(true) or this._isLoggedIn.next(false) depending on the result
    }

    get isLoggedIn() {
        return this._isLoggedIn.asObservable();
    }
}

Затем в компоненте, где вы хотите отобразить кнопку входа / выхода, добавьте private userService: UserService в конструктор, затем напишите что-нибудь вот так в шаблоне:

<button>{{ userService.isLoggedIn | async ? 'Logout' : 'Login' }}</button>

Answer 2

Без обид, но вы упускаете много основ в JS / Angular, как я понял из вашего вопроса, вам все равно нужно посмотреть некоторые уроки о JS.

, касающиеся Ваш вопрос:

loggedIn: boolean;
   login() {
      if (this.loginForm.valid) {
         this.user.login_user(JSON.stringify(this.loginForm.value))
         .subscribe(
            data => {  
             this.loggedIn = true;
            //will navigate to home
            this.router.navigate(['']); 
         }, error => console.log(error));
      } else {
            console.log('Invalid form');
        }
      }

и для изменения текста кнопки или любого другого подобного задания, для которого вам не нужно когда-либо обновлять sh страницу, используя window.location.reload();

, к которой вы можете обратиться переменную status в вашем компоненте и измените ее значение после успешного входа в систему, а в вашем шаблоне отобразите значение в соответствии с этим шаблоном status variable

. html

<button (click)="login">{{loggedIn ? 'logout' : 'login'}}</button>

PS Если вы хотите прочитать это значение переменной loggedIn в других компонентах, вам придется изменить ее тип на EventEmitter и включить его в службу Singelton, добавить в него значение sh после зарегистрированного успеха и подписаться на него. откуда угодно.