[英]how i can to call directive ngxPrint from code (angular 7)
我有两个按钮。 第一个按钮创建我的数据以打印到 .pdf,第二个按钮设置 ngxPrint
<button class="report-btn" [class.btn-disabled]="!settingsReport.fromTo || isIncorrectFile" type="button" (click)="performReport()" [translate]="'report.btn'"></button>
<button class="report-btn"
[class.btn-disabled]="!reportGenerated"
[useExistingCss]="true"
ngxPrint
printSectionId="report-print"
type="button"
[translate]="'report.btn-print'"></button>
我想要组合按钮,最后只有一个按钮。
不幸的是,当我将(单击)事件从第一个按钮复制到第二个按钮时,出现错误。 单击时不会调用我的函数
<button class="report-btn"
(click)="performReport()"
[class.btn-disabled]="!settingsReport.fromTo || isIncorrectFile"
type="button"
[translate]="'report.btn-print'"
[useExistingCss]="true"
printSectionId="report-print"
ngxPrint
></button>
ERROR TypeError: Cannot read property 'innerHTML' of null
at NgxPrintDirective.push.../node_modules/ngx-print/fesm5/ngx-print.js.NgxPrintDirective.print (ngx-print.js:197)
at Object.eval [as handleEvent] (ReportsComponent.html:132)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
所以,我想,我需要从我的 .component.ts 调用指令,但我不知道怎么做
这是我所做的,可能会有所帮助
隐藏带有 ngxPrint 指令的按钮并为其添加了一个 ViewChild 选择器。
在模板中,
<!--- This is hidden using CSS ----->
<button
type="button"
class="btn btn-sm d-none"
[useExistingCss]="true"
printSectionId="print-section"
#printBtn
ngxPrint
>
Print
</button>
<!-- This button will trigger click event on the hidden button -->
<button (click)="saveAndPrint()"> Print </button>
在组件中,
@ViewChild('printBtn') printBtn: ElementRef<HTMLElement>;
然后添加另一个带有点击事件的按钮,如下所示,
saveAndPrint() {
this.saveToServer();
let el: HTMLElement = this.printBtn.nativeElement;
el.click();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.