通过以下链接后
我知道我们不应该直接操纵DOM。因此,我开始探索使用角度4的Renderer2。
因此,我开始编写一些代码以将svg添加到DOM。以下是我的代码片段。
HTML代码
<div class="row">
<div class="col-12">
<div #myBarGraph id="host"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
Component.ts
export class BarGraphComponent implements OnInit {
host:any;
svg:any;
@ViewChild('myBarGraph') myBarGraph:ElementRef;
constructor(private renderer:Renderer2) { }
ngOnInit() {
//some logic
}
// called on some drop down selection
teamSelection(){
//some logic
this.host = this.mybarGraph.nativeElement;
buildSVG();
}
buildSVG():void {
this.svg = this.renderer.createElement('svg');
this.renderer.setAttribute(this.svg,'width','600');
this.renderer.setAttribute(this.svg,'height','400');
this.renderer.setAttribute(this.svg,'background-color','blue');
this.renderer.appendChild(this.host,this.svg);
}
}
Run Code Online (Sandbox Code Playgroud)
上面的代码能够将svg元素添加到DOM。但是令我惊讶的是,它实际上没有显示svg元素!。
我确实提到了以下问题
但到目前为止,我找不到合适的答案。
如上所示,svg存在于DOM中,但未显示在网页中。任何帮助将非常感激。
我在我的组件中使用ng2-smart-table.
我试图调用父组件的approveTheOrder()方法,但我无法获取父类的对象
以下是片段
{
title: "Actions",
type: "custom",
renderComponent: ActionRenderComponent,
onComponentInitFunction(instance) {
instance.actionEmitter.subscribe(row => {
if(row == CONSTANT.STATUS_APPROVE){
//here 'row' value is from childComponent-ActionRenderComponent,which I am able to get easily in parentComponet
this.approveTheOrder(instance.rowData.id); // here this is undefined,
}
if(row == CONSTANT.STATUS_REJECT){
this.rejectOrder();//this is undefined
}
if(row == CONSTANT.STATUS_PENDING){
this.pendingOrder(); // this is undefined
}
});
},
filter: false
};
Run Code Online (Sandbox Code Playgroud)
有没有人知道如何在下面的onComponentInitFunction()中获得'this'?
此外,我试图使用'绑定'功能未能成功实现目标,任何人都可以在这里指导我,我真的卡在这一点.
编辑1 请注意,我能够从中获取事件ChildComponent在为父级,但这里的问题是特定于NG2智能表的组成部分.
要从ChildComponent获取值,我正在尝试使用ng2-smart-table组件的onComponentInitFunction(instance)的内置回调函数