角度 7，ng-bootstrap 渲染模态模板

Question

我已经研究了几天，但我仍然无法解决这个问题。我希望能够根据选择打开模态 的下拉菜单。我正在尝试使用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>

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>

我希望上面的代码能帮助你

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

谢谢