我正在开发一个模态对话框,我需要能够动态地动态更改templateURL . 显示的是默认模板 . 我只是想知道如何实现它,因为这将通过templateURL名称和位置传入调用 . 下面是我的组件代码:
import { ModalService } from './../../services/modal.service';
import {Component, Input} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-ngbd-modal-content',
templateUrl: '../../templates/modal.tp1.html'
})
export class ModalOptionsComponent {
@Input() name;
constructor(public activeModal: NgbActiveModal, modelService: ModalService) {}
}
export class NgbdModalComponent {
constructor(private ngbModal: NgbModal) {}
}
理想情况下,我想从下面的服务类和组件中打开它,但我不确定如何做到这一点 . 我已经做了相当多的研究,但我对如何实现这一点并没有太多了解 .
Modal.service.ts:
import { ModalOptionsComponent } from './../pages/modal-options/modal-options.component';
import { Injectable } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Injectable()
export class ModalService {
constructor(private ngbModal: NgbModal, private modalComp: ModalOptionsComponent) { }
modalService(modal: any) {
const modalDefaults = {
templateUrl: '../templates/modal.tp1.html'
};
const modalOptions = {
hasClose: true,
closeButtonText: 'CLose',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?',
okResult: {}
};
}
showModal(customModalDefaults: any, cusomeModalOptions: any) {
}
}
我需要做的一件事就是为此创建服务类,我对角度很新,并想知道如何实现这一点 .
2 回答
因为我无法找到更改templateUrl的能力,我必须为我需要的每种类型的对话框创建一个组件 . 这方面的缺点是它不再是动态的,但它适合我需要它 . 基本上,您可以使用该服务生成所需的组件类型 . 有一件事是不幸的是,使用动态组件加载并不是真正可行的解决方案,因为这样做很复杂 . 以下是我所做的一个例子 .
Component code for default modal dialog:
Component code for FeaturedSearch:
Custom Modal Service :
首先:NgbModal,NgbActiveModal来自包'@ ng-bootstrap / ng-bootstrap' .
我认为没有必要创建单独的服务,因为“动态模板”功能可以通过包本身提供的功能来实现 . 我们来看看如何:
请参考下面的图片(我猜's the scenario). In your main component where you'已经把你的'default-modal',在我的情况下它是-detail(文件夹),从该组件(-detail.component)触发模态(默认模态) .
假设您正在通过单击按钮编辑* -detail.component中的事件 . 此单击会触发“默认模态”弹出窗口 . 我们在代码中看到这一点 .
*-.detail.component.html
<button class="btn" (click)="editEvents(eventvalues)"> Edit </button>
*-detail.component.ts
现在,模态组件: modal.component.html
请注意,您需要对文件进行必要的导入 . 在组件模块导入中,NgbModalModule也会添加到imports数组中 . 在component.ts文件中:NgbModal并从'./default-modal/default-modal.component'导入;