Angular2 ng-modal bootstrap composants

J'ai un modal composant créé avec ng-bootstrap comme suivre (pour le corps):

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

Et c'est angulaire 2 composant

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 être en mesure d'appeler cette modale à partir d'un autre composant de mon site web. Je veux juste appeler à partir de mon homeComponent la méthode open.

Voir mon homeComponent

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 ? Je viens angulaire 1.x et c'était tellement plus simple ...

il y a 2 bonnes réponses déjà, mais je pense que nous nous battons pour vous donner exact réponse étant donné que la question n'est pas super clair... Si vous pouviez mettre votre code dans un plunker (vous pouvez utiliser l'une des mains, comme un point de départ) que vous seriez obtenir la réponse exacte en un rien de temps.

OriginalL'auteur user7339839 | 2017-04-12

  1. 17

    C'est comment je le fais avec Angulaire 5 et ng-bootstrap. Créez votre modal composant 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 la composante dans laquelle vous voulez ouvrir la modale d'ajouter une variable de type NgbModal et appel ouvert comme suit:

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

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

}

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

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

    En supposant que vous avez d'autres Modules comme NgbModule importés cela devrait fonctionner.

    Merci! Fonctionne pour moi, mais... pourquoi la documetation ne pas expliquer pourquoi "entryComponents: [CreateAssetModalComponent]" ??????
    La meilleure réponse à cette question. Merci!!!!
    génial, merci! comment puis-je passer à la composante modale certains paramètres? dans la doc rien dire à ce sujet.

    OriginalL'auteur Bright Dodo

  2. 2

    Je ne suis pas sûr que je entièrement comprendre ce que vous essayez de faire, mais dans le fond il est très simple pour ouvrir une fenêtre modale avec un contenu vous suffit d'appeler le open méthode sur la NgbModal service. Le plus simple possible mise en œuvre devait être un one-liner (this.modalService.open('Hi tehre!');):

    @Component({
  selector: 'my-home',
  templateUrl: 'src/modal-basic.html'
})
export class HomeComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  ngOnInit(content) {
    this.modalService.open('Hi tehre!');
  }
}

    Voir en direct dans plunker: http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview

    Il est exactement le même que dans angular-ui/bootstrap pour AngularJS 1.x! Les principes sont exactement les mêmes, rien n'a changé.

    Ce pourrait vous donner des maux de tête est la façon de spécifier contenu de la modale. Dans l'exemple ci-dessus, je suis en utilisant une chaîne de caractères, mais dans la grande majorité des cas, vous voulez utiliser le format HTML avec fixations, directives, etc. Mais Angulaire est différent que vous juste ne pouvez pas passer HTML chaîne si vous ne voulez pas de navire compilateur de production (et vous ne voulez vraiment pas faire cela...).

    Donc votre meilleure option est d'utiliser un autre composant en tant que contenu, voici un exemple minimal: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

    Note: en raison d'un bogue dans l'angle lui-même, vous devez actuellement envelopper le open() appel de méthode avec la setTimeout. Bug de référence: https://github.com/angular/angular/issues/15634

    Lorsque j'appelle cette méthode ouverte de homeComponent j'ai eu cette erreur core.es5.js?0445:1085 ERREUR Erreur: Uncaught (promettre): Erreur: Pas de fournisseur pour HelloHomeModalComponent!
    c'est vraiment ne sait pas ce que vous essayez de faire exactement ... s'il vous Plaît essayez de reproduire votre exact problème dans un plunker (vous pouvez utiliser une de cette réponse comme un point de départ) sinon c'est super dur à l'aide....
    Je suis juste essayer d'ouvrir un modal à partir de mon domicile composant, pas juste en cliquant sur un bouton html Et mon modal que je veux ouvrir est également un composant. Très simple
    mais c'est exactement ce que je montre dans ma réponse dans ce plunker: plnkr.co/modifier/EJyZ6nF5WVAS9bvQycQe?p=preview - avez-vous le regarder?
    Ok, donc u dire angulaire de copier la composante modale du contenu html à l'autre composant à l'exportation de la classe NgbdModalContent ?

    OriginalL'auteur pkozlowski.opensource

  3. 1

    Ajouter le HelloHomeModalComponent à vos paramètres de constructeur et d'appeler la open fonction 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 content paramètre de votre composant open() si vous utilisez @ViewRef() pour obtenir le modèle approprié de référence de la composante modale.

    J'aurais du dire que j'avais déjà essayé ça, j'ai une erreur de fournisseurs. core.es5.js?0445:1085 ERREUR Erreur: Uncaught (promettre): Erreur: Pas de fournisseur pour HelloHomeModalComponent!
    Vous devez ajouter votre HelloHomeModalComponent pour le même module qui contient HomeComponent
    J'ai juste un module bootstraped par angulaire
    pourriez-vous poster le contenu de votre bootstrap module?
    "Paramètres fournis ne correspondent pas à la signature de l'appel de la cible." Il a besoin d'un paramètre.

    OriginalL'auteur K3v1n