Angular 2自定义组件如何在使用组件模板替换标签主体之前获取标签主体

时间:2016-09-14 11:06:12

标签: angular typescript

我希望在用组件模板替换之前能够使用组件标记的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}}。知道如何实现它吗?

0 个答案:

没有答案