- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想使用 angular 4.0.0 和ng-bootstrap 1.0.0-beta.4 但它不显示模态。
应用模块.ts
@NgModule({
// ...
declarations: [
LoginComponent
],
imports: [
// ...
NgbModule.forRoot()
],
entryComponents: [LoginComponent],
})
export class AppModule { }
登录.component.ts
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
@ViewChild('examplemodal')
private modalRef: TemplateRef<any>;
constructor(private modalService: NgbModal) { }
//.... some event that fires onModalRequest()
onModalRequest(): void {
const modalRef = this.modalService.open(this.modalRef); //Not working
modalRef.result.then((result) => {
console.log(result);
console.log('closed');
}).catch( (result) => {
console.log(result);
console.log('cancelling');
});
}
}
examplemodal.html
<ng-template #examplemodal>
<div class="modal">
stuff here...
</div>
</ng-template>
有什么帮助吗?
最佳答案
以下是我在应用程序中的实现方式:
应用程序模块.ts
@NgModule({
// ...
declarations: [
LoginComponent,
ModalComponent
],
imports: [
// ...
NgbModule.forRoot()
],
entryComponents: [ModalComponent], //Only Modal component included here
bootstrap: [AppComponent]
})
export class AppModule { }
我打开模式的组件。 LoginComponent 在你的情况下:
imports ....
import { ModalComponent} from '../Modal/Modal.component'; //My actual Modal component which includes HTML for modal
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
@ViewChild('examplemodal')
private modalRef: TemplateRef<any>;
constructor(private modalService: NgbModal) { }
//.... some event that fires onModalRequest()
onModalRequest(): void {
const modalRef = this.modalService.open(ModalComponent); //Added Modal Component here
modalRef.componentInstance.src = link;//anything u wish to pass to modal component @Input
modalRef.result.then((result) => {
console.log(result);
console.log('closed');
}).catch( (result) => {
console.log(result);
console.log('cancelling');
});
}
}
模态组件.ts:
import { Component, OnInit, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
@Input() src;
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
}
Modal.component.html:
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
STUFF HERE
</div>
在这里工作 Demo
请注意:您需要为 SCSS 安装 Bootstrap 4。npm install bootstrap -D
并将其引用包含在您的 style.scss 中,例如:
@import "node_modules/bootstrap/scss/bootstrap";
关于angular - NgbModal.open 在 Angular 4 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49244566/
我正在使用Anuglar 6 我有两个组件帐户和个人资料。 帐户组件已添加到应用程序组件中。 我想通过点击帐户组件中的按钮来打开个人资料组件。 但这给了我一个错误 Error: No componen
我有一个 Angular 6 应用程序,我试图实现一个从屏幕右侧滑入的模式窗口,如下所示:https://codepen.io/anon/pen/OayRVy 但是,无论我尝试什么,我都无法覆盖模态窗
我正在尝试使用 ngbmodal 创建通用确认框,它将在整个应用程序中使用。其中,标题和消息将从调用组件传递到模式。我创建了一个 DialogService 并添加到 entryComponents
我正在使用 NgbModal 打开用 描述的模态窗口指示。它似乎工作得很好。但是我不知道如何测试我的模式的内容。 我是这方面的新手,所以请随时指出您在我的方法中可能遇到的任何其他问题。我认为问题在于
我正在使用 Angular 6和 NgbModal喜欢 openViewDescriptionModal(id) { const viewModal = this.modalService.ope
我正在使用 Bootstrap 小部件并尝试创建一个全屏模式(页眉位于顶部,页脚位于底部,正文滚动位于中间)。我可以使用这里概述的一些简单的 html 轻松地做到这一点: https://www.co
我已经成功地将 NgbModal 集成到我的 Angular 2 应用程序中,我目前在模态中显示了另一个组件。 我遇到的问题是,一旦它出现并单击“关闭”,我就会收到以下错误消息: Cannot rea
我在尝试从惰性加载模块加载动态组件时遇到问题。更准确地说,我试图以模式 ( https://ng-bootstrap.github.io/#/components/modal/examples ) 而
我正在使用 NgbModal from @ng-bootstrap 从 Angular 6 应用程序打开模态窗口。在这些模态之一中,我希望单击按钮关闭模态并激活父/启动组件中的功能。我怎样才能做到这一
我想在关闭之前向弹出模式添加一个类,然后等待一段时间再关闭它。查看文档,我似乎可以使用 beforeDismiss 将其存档在NgbModalOptions选项; https://ng-bootstr
我需要模拟一个 NgbModal 来做一些 Angular 单元测试,但我不知道该怎么做。这是我的功能: openModal(deviceID: string, productID: stri
我正在使用 Angular 2,我正在使用一个表单模式,我有两个组件,从一个组件我以这种方式打开表单模式: import { Component, OnInit, Output} from '@ang
玩转 NgbModal并想触发打开方法 -> open(content: string | TemplateRef, options: NgbModalOptions) Launch demo mod
假设我有这样的模态模板: 我从另一个组件调用这个模态,所以: const modalRef = this.modalService.open(MobileDropdow
我有一个响应式(Reactive)表单,当用户在输入中按下 ESC 键时,我想在表单隐藏之前显示“你确定吗”模式。 一旦显示模态,我就会在控制台中收到以下异常: ERROR Error: Expres
我在弄清楚如何使我的模态可拖动时遇到了一些困难。我有可重用的模态,它有自己的服务,被称为创建一个内部组件。 确认.modal.service.ts import { Injectable } from
我想使用 angular 4.0.0 和ng-bootstrap 1.0.0-beta.4 但它不显示模态。 应用模块.ts @NgModule({ // ... declarations: [
我们刚刚将我们的应用程序升级到 angular 7,我们注意到所有 ngBootstrap 模态现在在关闭按钮上都有一个默认的自动对焦,如下图所示。 这是我的代码: html模态代码:
我在为我的应用程序中的确认模式编写单元测试时遇到了一些麻烦。这是我想测试的一段代码: confirmModal(prompt = 'Are you sure?', title = 'Confirm
我是一名优秀的程序员,十分优秀!