angular - 是否有机会将 ng-boostrap 弹出模式作为组件并将其从另一个组件中获取
问题描述
我在我的应用程序中使用这种模式 ,我有两个组件。
父 HTML:
<div id="list">
<ul><li class"list li><a id="modal1" (click) = "openmodal($event)"></a>
....
....
</div>
父组件:
import { Component, OnInit } from '@angular/core';
import { ChildModalComponent } from 'src/app/popup-modal/popup-modal.component';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'parentcomp',
templateUrl: './parentcomp.html',
styleUrls: ['./parentcomp.component.scss']
})
export class ParentComponent implements OnInit {
private loadComponent = false;
closeResult: string;
constructor(private modalService : NgbModal) {}
ngOnInit() {
}
openmodal(event) {
alert("clicked!")
//this.modalService = modalService;
let component = new ChildModalComponent(modalService);
//component.open("Hello");
//this.modalService.open("Hello!!");
}
}
在这里,当我打开时this.modalService.open("Hello!!")
-它打开的普通文本弹出窗口没有ng-template
儿童HTML:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
子组件:
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './child.component.html'
})
export class ChildModalComponent {
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
如何打开child.component.html
弹窗?点击时如何传递 id 或 title openmodal($event)
?
输出屏幕: 代码:编辑器代码
解决方案
您的父组件包含ng-template
包装不需要了解任何有关模式的子组件的子组件。
子组件可以拥有@Input()
和@Output()
绑定以将数据传递给它或从子组件内部与父组件交互(即关闭模式)。
粗略的例子:
父模板
<ng-template #content let-modal let-inputData="inputData">
<child-component
[input]="inputData"
(failed)="modal.dismiss()"
(succeeded)="modal.dimiss()"
/>
</ng-template>
<button (click)="modalOpen(content)">Launch modal</button>
家长班
....
modalOpen(content) {
this.modalService.open(content)...
}
子组件不需要实现任何特定于模式的功能。
[更新]
如评论中所述,此特定示例不起作用,因为该组件不是模块的一部分entryComponents
。此外,子组件没有编程功能,因为它只是在其模板中定义了一个 ngtemplate,而没有对其进行任何处理。
推荐阅读
- mysql - 选择行号等于其他表中某个值的行
- mysql - 在mysql中合并表
- ios - 重新排序 UITableView:用户第一次开始使用手柄拖动时的通知
- docker - Graylog docker 镜像绑定到内部 IP 而不是 0.0.0.0
- oracle - Oracle 包中的 SELECT ... FOR UPDATE
- matlab - 在 MATLAB 中从许多相同大小的矩阵中获取相同的子集
- javascript - 为什么 Webpack 认为我正在运行开发构建?
- c++ - 为什么我得到“候选构造函数不可行”?
- html - 在移动视图中引导 4 张单独的卡片?
- java - JADE IPMS:代理迁移失败