如何从对话框组件中打印一个组件的数据？

问题描述

如果要调用onConfirmed（）函数，我想从对话框组件中打印发票报告组件。

我尝试遵循https://medium.com/@Idan_Co/angular-print-service-290651c721f9。但这似乎在我的情况下不起作用。谁能告诉我我做错了什么还是我没有做过。

InvoiceReport组件和Dialog组件均位于Home模块中。而且Home Module位于主App模块内部。

我想在对话框组件中单击以打印发票报告文档。

但是点击时出现以下错误

对话框Component.html：

<h3>{{ confirmationText }}</h3>
<button mat-raised-button class="button-blue" (click)="onConfirmed()">
 {{ positiveResponse }}
</button>
<button mat-raised-button class="button-gray" (click)="onCancelled()">
 {{ negativeResponse }}
</button>

<router-outlet name="print"></router-outlet>

对话框component.ts：

onConfirmed() {
  this.printService.printInvoice("invoice-report");
  this.dialogRef.close(true);
}

打印服务：

printInvoice(documentName: string) {
   this.router.navigate([
     "/",{
       outlets: {
         print: ["print",documentName],},]);
 }

应用程序路由模块

import { InvoiceReportComponent } from "./home/invoice/invoice-report/invoice-report.component";
import { NgModule } from "@angular/core";
import { Routes,RouterModule } from "@angular/router";
import { DashboardComponent } from "./home/dashboard/dashboard.component";
import { RoomTransactionComponent } from "./home/room-transaction/room-transaction.component";
import { InvoiceComponent } from "./home/invoice/invoice.component";
import { HomeComponent } from "./home/home.component";
import { UserComponent } from "./home/user/user.component";
import { RoomAvailabilityComponent } from "./home/room-availability/room-availability.component";

const routes: Routes = [
     {
     path: "",component: HomeComponent,canActivateChild: [AuthGuard],children: [
       { path: "",component: DashboardComponent },{ path: "room-transaction",component: RoomTransactionComponent },{ path: "invoice",component: InvoiceComponent },{
        path: "invoice-report",outlet: "print",component: InvoiceReportComponent,],{ path: "dashboard",pathMatch: "full",redirectTo: "" },{ path: "**",redirectTo: "/login" },];

@NgModule({
   imports: [RouterModule.forRoot(routes)],exports: [RouterModule],})
 export class AppRoutingModule {}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）