Как правильно сделать этот компонент?

Question

[Sergei Abramov]

Создал компонент для авторизации в системе. В нем, после отправки формы и получения токена, происходит редирект.

submitForm() {
    this.blockButton = true;
    this.authService.signIn(this.signInForm.getRawValue()).subscribe(
        data => {
          this.authService.setAuthorizationToken(data);
          this.authService.updateCurrentMemberData();
        },
        error => {
          this.blockButton = false;
        },
        () => {
          this.router.navigate([this.authService.redirectUrl]);
        }
    );
  }

Понадобилась эта форма на другой странице (визард оформления заказа) - вставил его туда, но вот незадача: там мне не нужна эта переадресация. Как правильно создать этот компонент авторизации, что бы его можно было переиспользовать? Куда и как вынести переадресацию?

Answer 1

[Александр Мурашкин]

Как вариант сделайте stub компонент,

1.по кнопке авторизоваться output auth, который эммитит событие клика ,все где используется этот компонент в родительском обрабатывайте как нужно
2. Можно усложнить output :
При клике по кнопке делать запрос в сервис

submitSubject = BehaviorSubject(null)
@Output() auth = this.submitSubject.pipe(switchMap( _ => this.auth.signin(this.form.value))

В шаблоне просто делать эмит в submitSubject.
P.s извиняюсь за псевдокод, пишу с телефона

Comments

[Sergei Abramov]

Попробовал сейчас с BehaviorSubject - никак не выходит. Запрос отправляется при открытии страницы. И в output не срабатывает. Видать что-то не так делаю, опыта еще не хватает.

Что-то получилось через ReplaySubject:

submitSubject = new ReplaySubject<string>(2);
  @Output() auth = this.submitSubject.asObservable();
   ...
  submitForm() {
    this.blockButton = true;

    this.authService.signIn(this.signInForm.getRawValue()).subscribe(
            data => {
              this.authService.setAuthorizationToken(data);
              this.authService.updateCurrentMemberData();
              this.submitSubject.next(data);
            },
            error => {
              this.submitSubject.error(error);
              this.blockButton = false;
            },
    );
}

В родительском компоненте:

<app-auth-sign-in (auth)="test($event)"></app-auth-sign-in>

    test($event) {
        console.log($event);
    }

Сюда приходит уже строка из дочернего компонента, а хотелось бы что бы тут был так же обсервер, на который можно подписаться и обработать, например, если пришла ошибка.
Пример: plnkr.co/edit/gm0vt4W0e2MTeXmx