通过 jquery 更新后 Angular 不会重新渲染

Question

I have following html that shows when boolean variable "signUpSuccess" becomes true.

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();
      ...
      ...

In handleSignUp() that is called via jquery (component.handleSignUp() in ngOnInit function above), it connects to backend and processes signup:

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

Upon successful, I give signUpSuccess variable true. So "User has been registered." should appear automatically.

But it doesn't appear automatically. It appears if and only if I re-write something in that username input field.

How do I automatically shows <div class="alert alert-success" *ngIf='signUpSuccess'>User has been registered!</div> upon successful signup?

Answer 1

The issue you are running into is precisely why you are not supposed to mix jQuery and Angular.

The first thing you need to do is remove jQuery from angular.

1. npm uninstall jquery --save
2. Remove all jQuery references ( import * as $ from 'jquery'; )
3. Remove $(document).ready function
4. Remove ChangeDetectorRef import. (You should almost never use this)

You should then be left with a standard component. Since you were using $.ready , I'm assuming you're wanting your handleSignUp function to be called on component init. That is precisely what ngOnInit is for (See the NgOnInit Lifecycle Hook for further explanation)

You can then correct your code so that your handleSignUp is called on init:

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

It is a bad idea to use jQuery together with Angular. You need to know Angular change detection mechanism really deep to make jQuery work with Angular. And when you know the Angular change detection mechanism that well, you understand that there is no use of jQuery when you use Angular.