Угловая наблюдаемая не работает - PullRequest
Новая
       10

Угловая наблюдаемая не работает

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

Я пытаюсь добавить аутентификацию телефона Firebase в свое приложение.Я нахожусь в точке, где вам нужно создать объект reCAPTCHA.Я хочу знать, что reCAPTCHA решена или нет.

В шаблоне: 

{{ recaptchaSolved | async | json }}

Это мой класс компонентов: 

export class AddComponent implements OnInit, OnDestroy {
  windowRef: any;
  @ViewChild('recaptchaContainer') recaptchaContainer: ElementRef;
  recaptchaSolved: Observable<boolean>;

  constructor(
    private win: WindowService
  ) {}

  ngOnInit() {
    this.windowRef = this.win.windowRef;
    firebase.auth().useDeviceLanguage();

    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      this.recaptchaContainer.nativeElement, // for visible recaptcha
      {
        size: 'small',
        callback: response => {
          console.log(`reCAPTCHA solved`);
          this.recaptchaSolved = of(true);
        },
        'expired-callback': () => {
          console.log(`reCAPTCHA expired`);
          this.recaptchaSolved = of(false);
        }
      }
    );
  }

  ngOnDestroy() {}
}

WindowService: 

@Injectable()
export class WindowService {
  get windowRef() {
    return window;
  }
}

Проблема в том, что когда reCAPTCHA решена, я получаю "reCAPTCHA решено", зарегистрированный в консоли, но наблюдаемое не обновляется (это ноль).

1 Ответ

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

Используйте источник Subject и наблюдайте за ним. 

export class AddComponent implements OnInit, OnDestroy {
  recaptchaSolvedSource = new Subject<boolean>();
  recaptchaSolved = this.recaptchaSolved.asObservable();

  constructor(
    private win: WindowService
  ) {}

  ngOnInit() {
    ...
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      this.recaptchaContainer.nativeElement, // for visible recaptcha
      {
        size: 'small',
        callback: response => {
          this.recaptchaSolvedSource.next(true);
        },
        'expired-callback': () => {
          this.recaptchaSolvedSource.next(false);
        }
      }
    );
  }

  ngOnDestroy() {}
}
...