web-dev-qa-db-fra.com

Composants modaux Angular2 ng-bootstrap

J'ai un composant modal créé avec ng-bootstrap comme suit (juste un corps):

<template #content let-c="close" let-d="dismiss">
    <div class="modal-body">
        <p>Modal body</p>
    </div>
</template>

Et c'est composante angulaire 2

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'my-hello-home-modal',
    templateUrl: './hellohome.modal.html'
})

export class HelloHomeModalComponent {
    closeResult: string;

    constructor(private modal: NgbModal) {}

    open(content) {
        this.modal.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            console.log(reason);
        });
    }
}

Je veux vraiment pouvoir appeler ce modal depuis un autre composant de mon site Web. Je veux juste appeler depuis mon homeComponent la méthode open.

Voir mon composant d'accueil

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    constructor() {
    }

    ngOnInit() {
        console.log('Hello Home');

        /** want call modal popin here from the init component method in order to test the modal. **/

    }
}

Quelqu'un peut m'expliquer comment faire ça? Je venais d'angular 1.x et c'était tellement plus simple ...

angularbootstrap-modalng-bootstrap
6
user7339839

Voici comment je le fais avec Angular 5 et ng-bootstrap. Créez votre composant modal comme suit:

import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'sm-create-asset-modal',
  templateUrl: './create-asset-modal.component.html',
  styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }
}

et le modèle sera quelque chose comme:

<div class="modal-header">
  <h4 class="modal-title">Create New </h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button>
</div>

Dans le composant où vous voulez ouvrir le modal, ajoutez une variable de type NgbModal et appelez open comme suit:

export class MyComponent {
  constructor(private modal: NgbModal) {}

  onClick() {
    this.modal.open(CreateAssetModalComponent);
  }

}

Dans le NgModule où CreateAssetModalComponent est déclaré, ajoutez le composant dans le tableau entryComponents comme suit:

@NgModule({
  imports: [...],
  declarations: [CreateAssetModalComponent],
  entryComponents: [CreateAssetModalComponent]
})

En supposant que vous ayez d’autres modules comme NgbModule importés, cela devrait fonctionner.

16
Bright Dodo

Ajoutez la HelloHomeModalComponent à vos paramètres de constructeur et appelez la fonction open de HomeComponent comme suit:

import { Component, OnInit } from '@angular/core';
import { HelloHomeModalComponent } from "hello-home-modal.component";

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    constructor(private modal: HelloHomeModalComponent) {}

    ngOnInit() {
        this.modal.open();
    }
}

Vous n'avez pas besoin de passer un paramètre content à la fonction open() de votre composant si vous utilisez @ViewRef () pour obtenir la référence de modèle appropriée à partir du composant modal.

1
K3v1n