3
votes

Comment puis-je détruire un composant angulaire?

Je crée un modal et j'en ai fait un composant .

À l'intérieur de j'ai un bouton de fermeture. Je veux détruire lorsque je clique sur ce bouton.

Quelque chose comme ça:

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

J'ai aussi pourrait faire du bouton de fermeture un composant. Quelque chose comme si nécessaire.

Est-ce possible?

angular angular-components

0 commentaires

3 Réponses :

3
votes

Le parent doit détruire son enfant. Ainsi, vous pouvez envoyer un événement depuis l'enfant

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

Et capturer l'événement dans le parent:

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

Et le composant parent:

XXX

* ngIf directive se chargera du reste.

Peut-être une erreur ou deux, je suis sur un mobile ...

1 commentaires

Cela l'a fait pour moi ... sacrément ng-bootstrap tab modal contenait des valeurs.

0
votes

Si vous utilisez la boîte de dialogue modale ngx-bootstrap , par défaut le composant est détruit à la fermeture

Typescript

<div (click)="openModal()" class="btn btn-success"> Modal Component</div>

HTML p>

openModal() {
this.modalRef = this.modalService.show(SomeComponent,  {
  initialState: {
    title: 'Modal title',
    data: {}
  }
});
}

Stackblitz

0 commentaires

2
votes

Créez un ModalControlService qui a un BehaviorSubject booléen

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();
  }
}

Fournissez le service à partir du composant dont vous souhaitez héberger le modal afin d'obtenir la même instance du service dans votre composant hôte et votre composant modal.

Dans le composant hôte

<modal-component *ngIf="modalOpen$ | async"></modal-component>

et dans le modèle

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();
  }
}

Puis dans le composant modal

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);
  }
}

StackBlitz https://stackblitz.com/edit/angular-gc1ugw?file=src%2Fapp%2Fapp.component.ts

0 commentaires