如何使activeModal识别实际的Active Modal？

Question

此刻，我正尝试使用NgbActiveModal手动关闭模式。

但是，该组件没有关闭任何东西。它根本无法识别活动模态。

  onSubmit2() {
    this.finalUser = ({ ...this.newUser.value, ...this.newUser2.value });
    this.RS.RegisterUser(this.finalUser)
      .subscribe(() => {
        console.log(this.activeModal);

        this.activeModal.dismiss();

      })
  }
}

这是控制台日志显示的-https://i.stack.imgur.com/XL9NW.png

Angular html：

        <form [formGroup]="newUser2" *ngIf="verification!=false">
          <br>
          <label>Street</label>
          <br>
          <input type="text" placeholder="Please Input Street for Delivery" formControlName="Street">
          <br>
          <label>First Name</label>
          <br>
          <input type="text" placeholder="First Name here" formControlName="FirstName">
          <br>
          <label>Last Name</label>
          <br>
          <input type="text" placeholder="Last Name here" formControlName="LastName">
          <br>
          <input type="submit" class="btn btn-success" [disabled]="!newUser2.valid" (click)="onSubmit2()">  
        </form>

打字稿侧：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { matchOtherValidator } from '../match-other-validator';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { map, take, switchMap } from 'rxjs/operators';
import { RegisterService } from '../register.service';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

const tzAsyncValidator = (http: HttpClient) => (c: FormControl) => {
  console.log(c.parent);
  if (!c || String(c.value).length === 0) {
    console.log("!c|| String (c.value).length ===0")
    return of(null);

  }

  return c.valueChanges.pipe(
    take(1),
    switchMap(_ =>
      http.get('http://localhost:4000/userIds/' + String(c.value))
        .pipe(
          map((ids: any[]) => {
            console.log(ids);
            if (ids.length === 1) {
              return { exists: true }
            }
            if (ids.length === 0) {
              return null;
            }
          }))
    ))
}






@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {
  public newUser;
  public verification = false;
  public newUser2;
  public finalUser;
  constructor(private http: HttpClient, public RS: RegisterService, public activeModal:NgbActiveModal) { }





  ngOnInit() {
    this.newUser = new FormGroup({
      Tz: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(9)], [tzAsyncValidator(this.http)]),
      Email: new FormControl('', [Validators.required, Validators.email]),
      PW: new FormControl('', [Validators.required, Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$')]),
      PWVerification: new FormControl('', [Validators.required, Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'), matchOtherValidator('PW')])
    })
  }
  onSubmit() {
    this.verification = true;
    this.newUser2 = new FormGroup({
      City: new FormControl('', Validators.required),
      Street: new FormControl('', Validators.required),
      FirstName: new FormControl('', Validators.required),
      LastName: new FormControl('', Validators.required)
    })

  }


  onSubmit2() {
    this.finalUser = ({ ...this.newUser.value, ...this.newUser2.value });
    this.RS.RegisterUser(this.finalUser)
      .subscribe(() => {
        console.log(this.activeModal);

        this.activeModal.dismiss();

      })
  }
}

Answer 1

当您打开一个弹出窗口时，您可以获取模态的引用，并在选择时将变量存储在一个变量中。

例如您可以使用计时器“ rxjs”关闭

//see that store in a variable "ref" the modal
this.ref=this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
//you can subscribe to close
this.ref.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
//in any time, you can call to this.ref.close()
timer(2000).subscribe(()=>{
  this.ref.close('time out!')
})

参见simple stackblitz