web-dev-qa-db-fra.com

comment ouvrir les modaux ng bootstrap depuis un autre composant?

Je souhaite ouvrir ou fermer des modaux à partir d'un autre module à l'aide du composant 1. Toutefois, je suis actuellement dans l'impossibilité d'accéder au modalRef de ngBootstrap des modaux de ce composant pour pouvoir le fermer/l'ouvrir.

Supposons que ce scénario

Un module 

<component1></component1>

Another Module Ce module a plusieurs composants et chaque composant a un mode modal que je dois afficher ou masquer en fonction des conditions du composant 1.

<component2> //have ng bootstrap modal in it </component2>
<component3> //have ng bootstrap modal in it </component3>
<component4> //have ng bootstrap modal in it </component4>
<component5> //have ng bootstrap modal in it </component5>
<component6> //have ng bootstrap modal in it </component6>

Actuellement, je le fais en mettant simplement un bouton caché dans ce module et en cliquant dessus en utilisant le code JavaScript d'un autre composant. Je sais que ce n'est pas une bonne approche. Je souhaite que quelqu'un me donne une approche pour appeler ces modaux ou me dis s'il y a quelque chose à changer dans la conception.

Autant que je sache, je pense que le service sera utile pour le faire. Mais avant de changer le design, je veux l'opinion de quelqu'un. Merci

angularng-bootstrap
3
Mehmood Ahmad

Créez un service avec Observable et déclenchez et émettez quel utilisateur cliquez sur le bouton de fermeture. 

Une fois le bouton de fermeture cliqué, l'événement peut être capturé dans n'importe quel autre composant et une action peut être effectuée.

Un service 

@Injectable()
export class SomeService {
   public popup: Subject<any> = new Subject<any>();

  constructor() {}
}

Composant qui ont modal pour fermer.

constructor(SomeService: SomeService){
  this.SomeService.popup.subscribe((val)=>{
     if(val === 'close') {
       // close the modal
     }
   });
}

Et maintenant, à partir de l'autre composant, vous pouvez déclencher l'événement pour fermer le modèle. vous pouvez effectuer la fermeture de n'importe quel composant.

constructor(private SomeService: SomeService) {}

SomeMethod() {
  this.someService.popup.next('close');
}
1
Aniruddha Das

  1. Dans app.module.ts:

    {
    ...
    imports [...],
    entryComponents: [ModalComponent],
    ...
}

  2. Ecrivez votre modèle dans le cadre "Composants en tant que contenu" de ici .

  3. Dans le composant où vous utilisez le modal:

    • importer ModalComponent et dépendances
    • constructeur (private modalService: NgbModal)

    • préférable mettre cela dans une méthode:

      const modal = this.modalService.open(ModalComponent);
modal.componentInstance.title = "Dialog";
modal.componentInstance.body = "Your message";
1
Andy

Je viens juste de rencontrer le même problème et de trouver ce fil,Aniruddha Dasa fait un excellent travail en soulignant les exigences de base, mais j’ai trouvé qu’il manquait l’utilisation de TemplateRef qui est le prochain et juste au cas où quelqu'un d'autre aurait ce problème, je le finirai. en utilisant le même modèle que celui d'Aniruddha

Modèle: 

<ng-template #updatemodal>
  <div class="modal">
    stuff here...
  </div>
</ng-template>

Composant: 

@ViewChild('updatemodal')
private modalRef: TemplateRef<any>;

private myModal<any>;

constructor(SomeService: SomeService, modalService: NgbModal){
  this.SomeService.popup.subscribe((val)=>{
     if(val === 'open') {
       this.myModal = this.modalService.open(this.modalRef);
     }
   });
}

Référencer le modal qui a été créé est un excellent moyen de permettre davantage d’utilisation et de flexibilité dans la réponse en utilisant:

this.myModal.result.then((result) =>{
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });

depuis le NgBootstrap site

1
Alex J Wilkinson

Le problème est que la variable NgbModule est disponible pour le module et non pour un autre module de votre application. Lorsque vous importez un module (ici NgbModule), il est spécifique à ce module uniquement. Vous devez donc soit inclure NgbModule dans l'autre module, soit l'exporter dans le module actuel et importer le module actuel dans l'autre module.

importer le dans l'autre module

@NgModule({
  imports: [
    NgbModule,
  ],

Ou importez le premier module de la seconde qui contenait déjà le module NgbModule.

0
Aniruddha Das