Angular7、bootstrap渲染模态模板

Question

我研究了好几天了，还是没能解决这个问题。我希望能够打开一个基于 selection 的模式的下拉菜单。我正在尝试使用 NgbModal 库中的模态服务。使用文档中的示例。当我将模态按钮放在下拉列表没有捕捉到事件。所以我根据用户 select 在下拉菜单中的内容做了一个条件语句。问题是，我不知道如何传递模态内容适当地。在示例中，他们使用带有 ng-template 的缩略图，并在单击模态按钮时传递内容。由于此按钮现在是 select 组件中的一个选项。当我 select 正确的下拉选项时，屏幕变暗，但没有出现模态，因为内容未定义任何帮助将不胜感激。

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>

Answer 1

我已经根据您的要求进行了一些更改，请按照以下代码进行操作

首先创建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) {}
}

然后根据您的要求从我下面的主要组件调用它...

组件名称是 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>

希望以上代码对您有所帮助

如果您有任何问题或疑问，请告诉我

谢谢

Angular7、bootstrap渲染模态模板

Angular 7, ng-bootstrap rendering modal template

ng-bootstrap

ngmodel

angular