Модальные компоненты ng-bootstrap Angular2

У меня есть модальный компонент, созданный с помощью ng-bootstrap, как показано ниже (только тело):

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

И это компонент angular 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);
        });
    }
}

Я действительно хочу иметь возможность вызывать этот мод из другого компонента на моем веб-сайте. Я просто хочу вызвать из моего homeComponent метод open.

Посмотреть мой домашний компонент

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

    }
}

Кто-нибудь может объяснить мне, как это сделать? Я пришел из angular 1.x, и это было намного проще...


person user7339839    schedule 12.04.2017    source источник
comment
уже есть 2 хороших ответа, но я думаю, что мы изо всех сил пытаемся дать вам точный ответ, поскольку вопрос не очень ясен... Если бы вы могли поместить свой код в плункер (вы можете использовать один сети в качестве отправной точки), чем вы получите точный ответ в кратчайшие сроки.   -  person pkozlowski.opensource    schedule 12.04.2017


Ответы (3)


Вот как я это делаю с Angular 5 и ng-bootstrap. Создайте свой модальный компонент следующим образом:

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

и шаблон будет примерно таким:

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

В компоненте, из которого вы хотите открыть модальное окно, добавьте переменную типа NgbModal и вызовите open следующим образом:

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

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

}

В NgModule, где объявлен CreateAssetModalComponent, добавьте компонент в массив entryComponents следующим образом:

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

Предполагая, что у вас есть другие импортированные модули, такие как NgbModule, это должно работать.

person Bright Dodo    schedule 11.01.2018
comment
Спасибо! У меня работает, но... почему документация не объясняет, почему entryComponents: [CreateAssetModalComponent] ?????? - person TigerSpirt; 21.02.2018
comment
Лучший ответ на это. Благодарю вас! - person Nizar B.; 25.10.2018
comment
большое спасибо! как я могу передать модальному компоненту некоторые параметры? в доке об этом ничего не сказано. - person Andrea Scarafoni; 16.05.2019
comment
Лучшее решение! Слава Богу, этот пост был на вершине поиска Google, сэкономил мне часы!! Спасибо!!! - person Pritish kumar; 10.07.2020

Я не уверен, что полностью понимаю, что вы пытаетесь сделать, но по сути это очень просто — открыть модальное окно с определенным содержимым< /em> вы просто вызываете метод open для службы NgbModal. самой простой возможной реализацией будет однострочник (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!');
  }
}

Посмотрите его вживую в плункере: http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview< /а>

Это точно так же, как в angular-ui/bootstrap для AngularJS 1.x! Принципы точно такие же, ничего не изменилось.

Что может доставить вам головную боль, так это то, как указать содержимое модального окна. В приведенном выше примере я использую строку, но в подавляющем большинстве случаев вы хотите использовать HTML с привязками, директивами и т. д. Но Angular отличается тем, что вы просто не можете передать строку HTML, если не хотите отправлять компилятор в производство (и вы действительно не хотите этого делать...).

Поэтому ваш следующий лучший вариант — использовать другой компонент в качестве контента. Вот минимальный пример: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

Примечание: из-за ошибки в самом Angular в настоящее время вам необходимо обернуть вызов метода open() вызовом метода setTimeout. Ссылка на ошибку: https://github.com/angular/angular/issues/15634

person pkozlowski.opensource    schedule 12.04.2017
comment
Когда я вызываю этот открытый метод из homeComponent, у меня возникает эта ошибка core.es5.js?0445:1085 ERROR Error: Uncaught (in promise): Ошибка: нет провайдера для HelloHomeModalComponent! - person user7339839; 12.04.2017
comment
@user7339839 user7339839 на самом деле неясно, что вы пытаетесь сделать точно ... Пожалуйста, попробуйте воспроизвести вашу точную проблему в плункере (вы можно использовать один из этого ответа в качестве отправной точки) - в противном случае очень сложно помочь.... - person pkozlowski.opensource; 12.04.2017
comment
Я просто пытаюсь открыть модальное окно из своего домашнего компонента, а не просто нажав кнопку html. И мое модальное окно, которое я хочу открыть, также является компонентом. Очень просто - person user7339839; 12.04.2017
comment
@ user7339839, но это точно то, что я показываю в своем ответе в этом плункере: plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview — вы когда-нибудь смотрели на него? - person pkozlowski.opensource; 12.04.2017
comment
Итак, вы говорите angular скопировать html-содержимое модального компонента в другой компонент с классом экспорта NgbdModalContent? - person user7339839; 12.04.2017
comment
Да, как объясняется в ответе, содержимое модального окна может быть одним из следующих: строка (не очень полезная, так как не может содержать HTML), другой компонент (как показано на plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview). Существует третий вариант передачи ссылки на шаблон (показан на нашей демонстрационной странице) - person pkozlowski.opensource; 12.04.2017
comment
Хорошо, я подтверждаю ваш ответ, но это не совсем то, что я ожидал. Я думал, что мы можем просто вызвать метод из другого компонента и не передавать html или строку из метода друг другу. - person user7339839; 12.04.2017
comment
@user7339839 user7339839, если вы считаете, что есть вариант использования, который не охвачен, или у вас есть предложение по улучшению API, не стесняйтесь открывать вопрос на github.com/ng-bootstrap/ng-bootstrap/issues - person pkozlowski.opensource; 12.04.2017

Добавьте HelloHomeModalComponent в параметры конструктора и вызовите функцию open из HomeComponent следующим образом:

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

Вам не нужно передавать параметр content в open() вашего компонента, если вы используете @ViewRef() для получения соответствующей ссылки на шаблон из модального компонента.

person Technohacker    schedule 12.04.2017
comment
Я должен сказать, что уже пробовал это, у меня есть ошибка от провайдеров. core.es5.js?0445:1085 ОШИБКА Ошибка: необработанный (в обещании): ошибка: нет поставщика для HelloHomeModalComponent! - person user7339839; 12.04.2017
comment
@user7339839 user7339839 Вы должны добавить свой HelloHomeModalComponent в тот же модуль, который содержит HomeComponent - person Technohacker; 12.04.2017
comment
У меня есть только один модуль, загруженный angular - person user7339839; 12.04.2017
comment
@user7339839 user7339839 не могли бы вы опубликовать содержимое вашего загрузочного модуля? - person Technohacker; 12.04.2017
comment
Предоставленные параметры не соответствуют ни одной сигнатуре цели вызова. Ему нужен параметр. - person Becario Senior; 28.09.2017