在Angular中,可以通过以下步骤解决重定向后模态窗口消失的问题:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ModalService {
private modalVisible = new Subject();
modalVisible$ = this.modalVisible.asObservable();
show() {
this.modalVisible.next(true);
}
hide() {
this.modalVisible.next(false);
}
}
import { Component, OnInit } from '@angular/core';
import { ModalService } from 'path/to/modal.service';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
modalVisible = false;
constructor(private modalService: ModalService) { }
ngOnInit() {
this.modalService.modalVisible$.subscribe(visible => {
this.modalVisible = visible;
});
}
close() {
this.modalService.hide();
}
}
show()
方法来显示模态窗口。import { Component } from '@angular/core';
import { ModalService } from 'path/to/modal.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(private modalService: ModalService) { }
openModal() {
this.modalService.show();
}
}
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { ModalService } from 'path/to/modal.service';
@Injectable({
providedIn: 'root'
})
export class SaveModalGuard implements CanActivate {
constructor(private modalService: ModalService, private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
// Save the modal visibility before redirecting
sessionStorage.setItem('modalVisible', this.modalService.modalVisible.toString());
return true;
}
}
import { Component, OnInit } from '@angular/core';
import { ModalService } from 'path/to/modal.service';
@Component({
selector: 'app-target',
templateUrl: './target.component.html',
styleUrls: ['./target.component.css']
})
export class TargetComponent implements OnInit {
constructor(private modalService: ModalService) {
const modalVisible = sessionStorage.getItem('modalVisible');
if (modalVisible) {
this.modalService.show();
}
}
ngOnInit() {
// Other initialization logic
}
}
这样,当发生重定向时,模态窗口的显示状态将会被保存,并在重定向的目标组件中恢复。