[英]How can I destroy an Angular component?
我正在制作一个模态,我把它变成了一个组件<modal-component>
。
在<modal-component>
里面我有一个关闭按钮。 当我单击该按钮时,我想销毁<modal-component>
。
像这样的东西:
<button (click)="closeModal()">Close</button>
我也可以让关闭按钮成为一个组件。 如果需要,可以使用<close-modal>
类的东西。
这可能吗?
父母必须摧毁它的孩子。 所以你可以从孩子发送一个事件
@Output()
onClose: EventEmitter<boolean> = new EventEmitter();
...
closeModal() {
this.onClose.emit(true);
}
并在父级中捕获事件:
<modal-component *ngIf="showModal" (onClose)="modalClosed($event)">
和父组件:
modalClosed(isClosed) {
this.showModal = false;
}
*ngIf
指令将负责其余的工作。
可能是一两个错误,我在手机上...
创建一个具有布尔 BehaviorSubject 的 ModalControlService
import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs';
@Injectable()
export class ModalControlService {
modalOpen$ = new BehaviorSubject<boolean>(false);
open() {
this.modalOpen$.next(true);
}
close() {
this.modalOpen$.next(false);
}
}
从要托管模态的组件提供服务,以便您在主机组件和模态组件中获得相同的服务实例。
在宿主组件中
import { Component } from '@angular/core';
import { ModalControlService } from './modal-control.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
providers: [ ModalControlService ]
})
export class AppComponent {
modalOpen$ = this.modalControlService.modalOpen$;
constructor(private modalControlService: ModalControlService) {}
openModal() {
this.modalControlService.open();
}
}
并在模板中
<modal-component *ngIf="modalOpen$ | async"></modal-component>
然后在模态组件中
import { Component, OnInit } from '@angular/core';
import { ModalControlService } from '../modal-control.service';
@Component({
selector: 'modal-component',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent {
constructor(private modalControlService: ModalControlService) { }
closeModal() {
this.modalControlService.close();
}
}
StackBlitz https://stackblitz.com/edit/angular-gc1ugw?file=src%2Fapp%2Fapp.component.ts
如果您使用ngx-bootstrap
模态对话框,默认情况下组件在关闭时被销毁
打字稿
openModal() {
this.modalRef = this.modalService.show(SomeComponent, {
initialState: {
title: 'Modal title',
data: {}
}
});
}
HTML
<div (click)="openModal()" class="btn btn-success"> Modal Component</div>
还有一个技巧:
import { ViewContainerRef } from '@angular/core';
constructor(private viewContainerRef: ViewContainerRef) {}
...
private selfClose() {
this.viewContainerRef
.element
.nativeElement
.parentElement
.removeChild(this.viewContainerRef.element.nativeElement);
}
注意:它会使组件被移除/消失,但不会调用 ngOnDestroy 钩子,组件不会被完全销毁,直到父组件被销毁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.