带有模板内容的角2选择器
带有模板内容的角2选择器
提问于 2016-11-02 14:01:28
我使用的是角2和@ng-引导。我有这样一个情态对话：
<template #editDialog let-c="close" let-d="dismiss">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="d()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">MyHeader</h4>
</div>
<div class="modal-body">
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" (click)="c('true')">OK</button>
<button class="btn btn-default" (click)="c('false')">Cancel</button>
</div>
</template>我想重用模态对话框的框架，只想改变组件中的主体。应该是这样的：
<my-modal>
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
</div>
</my-modal>有人能告诉我如何做到这一点，尤其是使用模型(selected.Caption)吗？我试了很多次，但没能成功。
更新
清除:我想注入一些HTML标记，所以我得到了这样的东西：
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<!-- MY CUSTOM HTML COMES HERE! -->
<!-- MAYBE WITH <ng-content></ng-content> -->
</div>
<div class="modal-footer">
<button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
<button class="btn btn-default" ((click)="activeModal.close(false)">Abbrechen</button>
</div>@pkozlowski.opensource的答案基本上适用于打开和关闭模式。但我没有把我的身体放进去
<my-modal>
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
</div>
</my-modal>Stack Overflow用户
发布于 2016-11-02 15:14:20
来自https://ng-bootstrap.github.io库的Modals实现使得重用内容变得非常容易--您所需要做的就是创建一个组件并使用它作为内容。在您的特定情况下，您可以创建如下所示的组件：
@Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">My Header</h4>
</div>
<div class="modal-body">
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [value]="selectedCaption" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
<button class="btn btn-default" (click)="activeModal.close(false)">Cancel</button>
</div>
`
})
export class EditDialogContent {
@Input() selectedCaption;
constructor(public activeModal: NgbActiveModal) {}
}然后与此组件的@Input：modalRef.componentInstance.selectedCaption = 'Some caption';进行交互。下面是一个活生生的例子：http://plnkr.co/edit/kRvBeFbvFR2ORInZAij7?p=preview
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40381862
复制相关文章
相似问题
腾讯云开发者
