我希望在用组件模板替换之前能够使用组件标记的innerHtml。说实话很难解释,这是一个例子。
这是组件(基本上它是bootstrap的模态弹出窗口):
@Component({
selector: 'div.modal[show]',
template: require('./popup.component.html')
})
export class PopupComponent implements OnInit, OnChanges, OnDestroy {
@Input() show: boolean;
@Input() headerText: string;
body: string;
constructor(private el: ElementRef, private renderer: Renderer) {
// get the body of tag before replacement with it's template and assign it to this.body somehow.
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges) {
$(this.el.nativeElement).modal({
show: changes["show"].currentValue,
keyboard: false
});
}
ngOnDestroy() {
$(this.el.nativeElement).data("modal", null);
}
}
及其模板:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
{{headerText}}
</div>
<div class="modal-body">
{{body}} // Body have to be placed here
</div>
</div>
</div>
及其用法:
<div class="modal" [show]="true" [headerText]="'Edit standard field'">
<span>Something that have to be placed in div with class - modal-body</span>
</div>
以及其他地方:
<div class="modal" [show]="true" [headerText]="'Edit standard field'">
<h2>Something else that have to be placed in div with class - modal-body</h2>
</div>
所以基本上我试图获得<span>Something else that have to be placed in div with class - modal-body</span>
并用它替换 - {{body}}
。知道如何实现它吗?