Question

这是我先前的question的后续问题。当我尝试使用断点调试代码时，我的printService.printDocument被执行了路由器导航。但是router.navigate()调用并未对流程产生任何影响，并且未达到InvoiceComponent构造函数的控制。

print.service.ts

export class PrintService{
    isPrinting = false;

    constructor(private router: Router) {}

    printDocument(documentName: string, documentData: string[]){
        this.isPrinting = true;
        this.router.navigate(['/', 
        {outlets: { 
            'print': ['print', documentName, documentData.join()]
        }}]);
    }
    onDataReady(){
        setTimeout( ()=> {
            window.print();
            this.isPrinting = false;
            this.router.navigate([{outlets: {print: null }}]);
        });
    }
}

app-routing.module.ts

const routes: Routes = [ 
  { path: 'print',
    outlet: 'print',
    component: PrintLayoutComponent,
    children: [
      { path: 'invoice/:invoiceIds', component: InvoiceComponent }
    ]
  }
];


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

invoice.component.ts

export class InvoiceComponent implements OnInit {
  invoiceIds: string[];
  invoiceDetails: Promise<any>[];

  constructor(route: ActivatedRoute,
              private printService: PrintService) {
    this.invoiceIds = route.snapshot.params['invoiceIds']
      .split(',');
  }

  ngOnInit() {
    this.invoiceDetails = this.invoiceIds
      .map(id => this.getInvoiceDetails(id));
    Promise.all(this.invoiceDetails)
      .then(() => this.printService.onDataReady());
  }

  getInvoiceDetails(invoiceId) {
    const amount = Math.floor((Math.random() * 100));
    return new Promise(resolve =>
      setTimeout(() => resolve({amount}), 1000)
    );
  }

}

让我知道为什么我的控件没有到达invoiceComponent构造函数吗？

Answer 1

将您的路线更改为以下内容：

const routes: Routes = [ 
{ path: 'print',
  outlet: 'print',
  component: PrintLayoutComponent,
  children: [
      { path: '/:invoiceIds/:additionalParams', component: InvoiceComponent }
    ]
   }
];

或将打印服务中的导航路线更改为

 this.router.navigate(['/', 
    {outlets: { 
        'print': ['invoice', documentName, documentData.join()]
    }}]);

根应用未使用命名路由器

1 个答案: