如何销毁Angular组件?

时间:2019-03-06 23:50:41

标签: angular angular-components

我正在制作模态,并将其作为组件<modal-component>

<modal-component>内部,我有一个关闭按钮。我想在点击该按钮时销毁<modal-component>

类似这样的东西:

<button (click)="closeModal()">Close</button>

我还可以使关闭按钮成为一个组件。如果需要,类似<close-modal>

这可能吗?

4 个答案:

答案 0 :(得分:0)

父母必须销毁其子女。这样您就可以发送来自孩子的事件

@Output()
onClose: EventEmitter<boolean> = new EventEmitter();

...
closeModal() {
    this.onClose.emit(true);
}

并在父级中捕获事件:

<modal-component *ngIf="showModal" (onClose)="modalClosed($event)">

和父组件:

modalClosed(isClosed) {
    this.showModal = false;
}

*ngIf指令将负责其余的工作。

可能是一两个错误,我正在使用手机...

答案 1 :(得分:0)

如果您使用的是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>

Stackblitz

答案 2 :(得分:0)

创建一个具有布尔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

答案 3 :(得分:0)

还有一个技巧:

import { ViewContainerRef } from '@angular/core';

constructor(private viewContainerRef: ViewContainerRef) {}
...
private selfClose() {
   this.viewContainerRef
    .element
    .nativeElement
    .parentElement
    .removeChild(this.viewContainerRef.element.nativeElement);
}

注意: 它会使组件被移除/消失,但不会调用 ngOnDestroy 钩子,直到父组件被销毁,组件才会被完全销毁。