如何使活动模态识别实际的活动模态?

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

角度 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!')
})

查看简单的堆叠闪电战