Angular 7, нг- bootstrap рендеринг модальный шаблон - PullRequest
Новая
       65

Angular 7, нг- bootstrap рендеринг модальный шаблон

0 голосов
/ 27 января 2020

Я изучал это в течение нескольких дней, но до сих пор не смог решить эту проблему. Я хочу, чтобы иметь возможность открыть модальное на основе выбора выпадающего меню. Я пытаюсь использовать модальный сервис из библиотеки NgbModal. Используя пример из документации. Когда я размещаю модальную кнопку внутри выпадающего меню, она не улавливает событие. Поэтому я сделал условное заявление на основе того, что пользователь выбирает в выпадающем меню. Проблема в том, что я не знаю, как правильно передать модальный контент. В примере они использовали миниатюру с ng-шаблоном и передают содержимое, когда нажата модальная кнопка. Поскольку эта кнопка теперь является опцией в выбранном компоненте. Когда я выбираю правильную опцию выпадающего меню, экран темнеет, но модальное изображение не появляется, потому что содержание не определено, любая помощь будет принята с благодарностью. 

import {component, OnInit, Input} from '@angular/core'
import { NgbModalConfig, NgbModal, NgbActiveModal} from 'ng-bootstrap/ng-bootstrap'

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})

export class NavComponent implements OnInit {
  @Input('event') event: any;

  constructor(public modalService: NgbModal){
    this.fileMenu = [];
  };

  changeMenu(e) {
    if (e.target.value === 'Launch Demo Modal'){
      this.modalService.open(content)
    }
  }

}

HTML

<nav class="navbar navbar-expand navbar-dark">
    <select class= "nav-drop (change)= "changeMenu($event)">
     <option> File </option>
     <option> Launch Demo Modal </option>
    </select>
  </nav>

1 Ответ

0 голосов
/ 27 января 2020

Я внес некоторые изменения в соответствии с вашими требованиями, просто следуйте нижеприведенному коду

первый созданный NgbdModalContent файл компонента 

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</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>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

, а затем вызовите его из моего основного основного компонента согласно вашему req ...

Имя компонента NgbdModalComponent 

import { Component, Input } from "@angular/core";
import { NgbModal, NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { NgbdModalContent } from "./modal-content";

@Component({
  selector: "ngbd-modal-component",
  templateUrl: "./modal-component.html"
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  changeMenu(e) {
    if (e.target.value === "Launch Demo Modal") {
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = e.target.value;
    }
  }
}

здесь html 

<select class= "nav-drop" (change)= "changeMenu($event)">
     <option> File </option>
     <option> Launch Demo Modal </option>
</select>

Надеюсь, приведенный выше код поможет вам

дайте мне знать, если у вас есть какие-либо вопросы или вопросы

спасибо

...