Angular не перерисовывается после обновления через jquery

Question

У меня есть следующее html, которое показывает, когда логическая переменная signUpSuccess становится истинной.

signup.component. html:

<div class="alert alert-success" *ngIf='signUpSuccess'>User has been registered!</div>

<form>
  <input class="input" type="text" id="username" name="username" [(ngModel)]="username" placeholder="Username"
            required="required" />
...
...

signup.component.ts:

import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
import { AuthenticationService } from '@shared/services/rest/authentication.service';
import { isPlatformBrowser } from '@angular/common';
import * as $ from 'jquery';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  public signUpSuccess: boolean = false;
  ...
  ...

  constructor(
    private AuthenticationService: AuthenticationService,
    @Inject(PLATFORM_ID) private platformId: any,
    private cdRef:ChangeDetectorRef // tried, but calling detectChanges() doesn't work
  ) { }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      const component = this;
      $(document).ready(function () {
      ...
      ...
      component.handleSignUp();
      ...
      ...

В handleSignUp (), который вызывается через jquery (component.handleSignUp () в функции ngOnInit выше), он подключается к бэкэнду и процессы регистрации:

handleSignUp() {
    this.AuthenticationService.signUp(this.username, this.email, this.name, this.password)
      .subscribe(
        data => {
          this.signUpSuccess = true;
...
...

В случае успеха я даю переменной signUpSuccess значение true. Итак, «Пользователь зарегистрирован!» должен появиться автоматически.

Но он не появляется автоматически. Он появляется тогда и только тогда, когда я что-то переписываю в поле ввода имени пользователя.

Как мне автоматически показывать <div class="alert alert-success" *ngIf='signUpSuccess'>User has been registered!</div> при успешной регистрации?

Answer 1

Проблема, с которой вы столкнулись, состоит именно в том, почему вы не должны смешивать jQuery и Angular.

Первое, что вам нужно сделать, это удалить jQuery из angular.

1. npm uninstall jquery --save
2. Удалить все jQuery ссылки (import * as $ from 'jquery';)
3. Удалить $(document).ready функция
4. Удалить ChangeDetectorRef импорт . (Вы почти никогда не должны использовать это)

В таком случае вам следует оставить стандартный компонент. Поскольку вы использовали $.ready, я предполагаю, что вы хотите, чтобы ваша функция handleSignUp вызывалась при инициализации компонента. Это именно то, для чего предназначен ngOnInit (дополнительные объяснения см. В крючке жизненного цикла NgOnInit)

Затем вы можете исправить свой код так, чтобы ваш handleSignUp вызывался при инициализации:

import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { AuthenticationService } from '@shared/services/rest/authentication.service';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  public signUpSuccess: boolean = false;
  ...
  ...

  constructor(
    private AuthenticationService: AuthenticationService,
    @Inject(PLATFORM_ID) private platformId: any,
  ) { }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.handleSignUp();
    }
  }

Answer 2

Использование jQuery вместе с Angular - плохая идея. Вам нужно знать механизм обнаружения изменений Angular очень глубоко, чтобы jQuery работал с Angular. И когда вы хорошо знаете механизм обнаружения изменений Angular, вы понимаете, что jQuery бесполезен при использовании Angular.