我希望在用户点击输入字段时显示一个弹出窗口,该字段工作正常,但我希望该弹出窗口的数据内容属性来自子组件的模板 . 这是一个例子:
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而不是依赖注入吗?如果是的话那我怎么能实现呢?
2 回答
这是一个解决方法:
将临时变量分配给要显示的组件
要点:上面的组件必须在其定义中公开ElementRef
创建将显示弹出窗口的元素
现在popover指令本身:
一个问题是绑定到属性会将值字符串化
因此这种方法不起作用 .
似乎Bootstrap popover需要一个字符串,因此这样会很好,但是对一个Angular组件进行字符串化并不会给它提供HTML .