Angular 7，ng-bootstrap 渲染模态模板答案

【问题标题】：Angular 7, ng-bootstrap rendering modal templateAngular 7，ng-bootstrap 渲染模态模板
【发布时间】：2020-05-12 23:25:36
【问题描述】：

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

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>

【问题讨论】：

标签： angular ng-bootstrap ngmodel

【解决方案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>

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

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

谢谢

【讨论】：