Angular2 ng-bootstrap-modal-Komponenten

Ich habe eine modale Komponente erstellt mit ng-bootstrap wie folgt (nur body):

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

Und es ist eckig 2-Komponenten -

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

Ich wirklich wollen, um in der Lage sein, diesen Aufruf modal von einer anderen Komponente in meinem web site. Ich will gerade Anruf von meinem homeComponent die open-Methode.

Siehe meine 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. **/

    }
}

Kann jemand mir erklären wie das geht ? Ich kam von angular 1.x und es war so viel einfacher ...

es gibt 2 gute Antworten schon, aber ich denke, dass wir zu kämpfen haben, geben Sie genauen Antworten, weil die Frage ist nicht super klar... Wenn man den code in eine plunker (Sie können verwenden Sie eine Netz-als Ausgangspunkt), als würden Sie eine exakte Antwort in kürzester Zeit.

InformationsquelleAutor user7339839 | 2017-04-12

  1. 16

    Dies ist, wie ich es mit Winkel-5 und ng-bootstrap. Erstellen Sie Ihre modale Komponente wie folgt:

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

    werden und die Vorlage wird so etwas wie:

    <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>

    In der Komponente, wo Sie wollen, zu öffnen am modal aus fügen Sie eine variable vom Typ NgbModal und aufrufen öffnen Sie wie folgt vor:

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

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

}

    In der NgModule, wo die CreateAssetModalComponent erklärt wird, fügen Sie die Komponente in der entryComponents array wie folgt:

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

    Vorausgesetzt, Sie haben andere Module wie NgbModule importiert, sollte diese Arbeit.

    Danke! Funktioniert für mich, aber... warum die documetation dont erklären, warum "entryComponents: [CreateAssetModalComponent]" ??????
    Die beste Antwort für diese. Danke!!!

    InformationsquelleAutor Bright Dodo

  2. 2

    Ich bin mir nicht sicher, ob ich voll verstehen, was Sie versuchen zu tun, aber im wesentlichen ist es sehr einfach zu öffnen, wird ein modales Fenster mit einem bestimmten Inhalt rufen Sie einfach die open Methode auf die NgbModal service. Die einfachste mögliche Umsetzung wäre eine 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!');
  }
}

    Sehen es live in plunker: http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview

    Ist es genau das gleiche wie in angular-ui/bootstrap für AngularJS 1.x! Grundsätze sind genau die gleichen, nichts hat sich geändert.

    Was könnte geben Ihnen Kopfschmerzen ist, wie Sie angeben Inhalt am modal. Im obigen Beispiel verwende ich einen string, aber in der überwiegenden Mehrzahl der Fälle, die Sie verwenden möchten HTML-Bindungen, Richtlinien etc. Aber Winkel ist anders, wie Sie einfach nicht passieren können HTML-string, wenn Sie nicht wollen, zu Schiff compiler auf die Produktion (und die Sie wirklich nicht wollen, dies zu tun...).

    Damit Ihre nächste beste option ist die Verwendung anderen Komponente als Inhalt, hier ist ein minimal-Beispiel: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

    Hinweis: durch einen Fehler in der Winkel-selbst benötigen Sie, um die derzeit wickeln die open() Methode nennen, mit der setTimeout. Fehler Referenz: https://github.com/angular/angular/issues/15634

    Wenn ich den Aufruf dieser Methode öffnen von homeComponent ich hatte diesen Fehler Kern.es5.js?0445:1085 FEHLER Error: Uncaught (Versprechen): Fehler: Kein provider für HelloHomeModalComponent!
    es ist wirklich nicht klar, was Sie versuchen zu tun genau ... Bitte versuchen Sie es zum reproduzieren des genauen problem in ein plunker (Sie können eine von dieser Antwort, die als Ausgangspunkt) - sonst ist es super schwer zu helfen....
    Ich bin nur versuchen, öffnen Sie ein modales von meinem Zuhause Komponente, nicht nur, indem Sie in eine html-Schaltfläche Und meine modal, die ich öffnen möchte, ist auch eine Komponente. Sehr einfach
    aber das ist genau, was zeige ich in meiner Antwort in diesem plunker: plnkr.co/Bearbeiten/EJyZ6nF5WVAS9bvQycQe?p=Album Vorhören - haben Sie jemals Blick auf Sie zu?
    Ok, so u sagen, zu eckig, zu kopieren Sie die modale Komponente, die html-Inhalte, die andere Komponente mit der export-Klasse NgbdModalContent ?

    InformationsquelleAutor pkozlowski.opensource

  3. 1

    Fügen Sie die HelloHomeModalComponent auf Konstruktor-Parameter, und rufen Sie die open Funktion von HomeComponent etwa so:

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

    Brauchen Sie sich nicht übergeben zu müssen, ein content parameter der Komponente open() wenn Sie @ViewRef (), um die entsprechende Vorlage Verweis aus der modalen Komponente.

    Ich sollte sagen, ich hatte auch schon versucht, ich habe einen Fehler vom Anbieter. Kern.es5.js?0445:1085 FEHLER Error: Uncaught (Versprechen): Fehler: Kein provider für HelloHomeModalComponent!
    Sollten Sie Ihre HelloHomeModalComponent, um das gleiche Modul, das enthält HomeComponent
    Ich habe nur ein Modul bootstraped durch eckige
    konnte Sie nach dem Inhalt Ihrer Bootstrap-Modul?
    "Gelieferten Parameter passen nicht zu jeder Signatur der call-Ziel." Es benötigt einen parameter.

    InformationsquelleAutor K3v1n

Schreibe einen Kommentar