我如何从代码中调用指令 ngxPrint（角度 7）答案

【问题标题】：how i can to call directive ngxPrint from code (angular 7)我如何从代码中调用指令 ngxPrint（角度 7）
【发布时间】：2020-03-16 14:29:38
【问题描述】：

我有两个按钮。第一个按钮创建用于打印到 .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 中调用指令，但我不知道该怎么做

【问题讨论】：

标签： html angular typescript

【解决方案1】：

这是我做的，可能会有所帮助

隐藏了带有 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();
}

【讨论】：