我想显示一个popover,因为用户点击了输入字段,该字段工作正常,但我希望该popover的数据内容属性来自子组件的模板。这是一个例子:
parent.ts
import {Component,AfterViewInit} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ChildComponent} from './child_test.ts';
@Component({
selector: 'app',
template: `<input type='text' data-toggle="popover" data-trigger="focus" data-placement="bottom" [attr.data-content]="getPopoverContent()" />`,
providers: [ChildComponent]
})
class AppComponent implements AfterViewInit{
constructor(private _child: ChildComponent) {}
getPopoverContent(){
return this._child; //returning empty object instead of child template
}
ngAfterViewInit(){
$("input").popover();
}
}
bootstrap(AppComponent);
child.ts
import {Component} from 'angular2/core';
@Component({
selector: "child-component",
template: "<div>Popover content from child.</div>"
})
export class ChildComponent{};
我应该使用DynamicComponentLoader而不是依赖注入吗?如果是的话那么我该如何实现呢?
答案 0 :(得分:0)
这是一种解决方法:
将临时变量分配给要显示的组件
<transaction-filter #popoverComponent></transaction-filter>
重要提示:上面的组件必须在其定义中公开ElementRef
constructor(public el: ElementRef) {}
创建将显示弹出窗口的元素
<button class="btn-sm btn-link text-muted"
data-animation="true"
data-placement="bottom"
title="Create Rule"
[popover]="popoverComponent">
Create Rule...
</button>
现在是popover指令本身:
/// <reference path="../../typings/tsd.d.ts"/>
import 'bootstrap'
import { Directive, ElementRef, Input} from 'angular2/core'
declare var $: JQueryStatic;
@Directive({
selector: '[popover]',
})
export class PopoverDirective {
@Input('popover') _component: any
_popover: JQuery
constructor(private _el: ElementRef) { }
ngOnInit() {
// Hide the component
this._component.el.nativeElement.style.display = "none"
// Attach it to the content option
this._popover = $(this._el.nativeElement)
.popover({
html: true,
content: this._component.el.nativeElement
})
// When the below event fires, the component will be made visible and will remain
this._popover.on('shown.bs.popover', () => {
this._component.el.nativeElement.style.display = "block"
})
}
}
答案 1 :(得分:-1)
一个问题是绑定到属性会将值
字符串化 [attr.data-content]
因此,这种方法不起作用。
似乎Bootstrap popover需要一个字符串,因此这样就可以了,但是对一个Angular组件进行字符串化并不会给它提供HTML。