Как я могу уничтожить угловой компонент?

Question

Я делаю модал и сделал его компонентом <modal-component>.

Внутри <modal-component> У меня есть кнопка закрытия. Я хочу уничтожить <modal-component>, когда нажму эту кнопку.

Примерно так:

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

Я также мог бы сделать кнопку закрытия компонентом. Что-то вроде <close-modal>, если необходимо.

Возможно ли это?

Answer 1

Если вы используете модальный диалог 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

Answer 2

Создайте ModalControlService с логическим BehaviorSubject

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

Answer 3

Родитель должен уничтожить своего ребенка. Таким образом, вы можете отправить событие от ребенка

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

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

И захватить событие в родительском:

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

И родительский компонент:

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

Директива

*ngIf позаботится обо всем остальном.

Может быть, одна или две ошибки, я на мобильном телефоне ...