带有模板内容的角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>回答 3
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用户
发布于 2016-11-03 09:39:20
我找到了解决办法。请看我的普伦克：http://plnkr.co/edit/BNlsp2bGfWmae4K4ZTtT?p=preview
我必须在我的模态视图中插入一个模板，如下所示：
[...]
export class EditDialogContent implements OnInit {
template: TemplateRef<any>;
constructor(public activeModal: NgbActiveModal) {}
}相应的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">My Header</h4>
</div>
<div class="modal-body">
<!-- THIS IS IMPORTANT! -->
<template [ngTemplateOutlet]="template"></template>
</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>正文模板HTML是：
<p>You can pass an existing component as content of the modal window. In this case remember to add content component as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>
<template #bodyTemplate>
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [(ngModel)]="selected.Caption" />
</div>
</template>
<button class="btn btn-lg btn-outline-primary" (click)="open(bodyTemplate)">Launch demo modal</button>要打开对话框，只需在后面的组件中这样做：
open(bodyTemplate) {
const modalRef = this.modalService.open(EditDialogContent);
modalRef.componentInstance.template = bodyTemplate;
modalRef.result.then((closeResult) => {
console.log(`Closed with: ${closeResult}`);
});
}感谢pkozlowski-opensource的帮助。
Stack Overflow用户
发布于 2016-11-02 14:32:30
您需要为该模式制作单独的组件。
如果你想要做到这一点，你只需要改变模态的主体，就像这样。
modal.component.ts
@Component({
selector: 'modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class AppComponent {
@Input() title: string;
}modal.component.html
<modal 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">{{ title }}</h4>
</div>
<div class="modal-body">
<ng-content select="body-of-modal"></ng-content>
</div>
<div class="modal-footer">
<ng-content select="footer-of-modal"></ng-content>
</div>
</modal>这里的重要部分是<ng-content>
那是怎么回事？
现在，如果您想要重用您的模式组件是其他组件，那么下面的示例如下所示：
您的示例：
<modal #editDialog title="My Header" let-c="close" let-d="dismiss">
<body-of-modal>
<div class="form">
<label class="form-label" for="myinput">Caption: </label>
<input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
</div>
</body-of-modal>
<footer-of-modal>
<button class="btn btn-default" (click)="c('true')">OK</button>
<button class="btn btn-default" (click)="c('false')">Cancel</button>
</footer-of-modal>
</modal>这个例子不是100%正确的，可能我做了一些排字，但我只是想试着解释一下简单的例子它是如何工作的。
我希望你能理解。如果没有，请毫不犹豫地问，从上面的例子看，是否有什么不清楚。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40381862
复制相关文章
相似问题
腾讯云开发者
