Корневое приложение не маршрутизирует к компонентному модулю с использованием именованного маршрутизатора. - PullRequest
Новая
       26

Корневое приложение не маршрутизирует к компонентному модулю с использованием именованного маршрутизатора.

0 голосов
/ 14 июня 2019

Это дополнительный вопрос моего предыдущего вопроса . Мой 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 }}]);
        });
    }
}

приложение-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?

1 Ответ

0 голосов
/ 15 июня 2019

Измените свой маршрут на что-то вроде ниже: 

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

или измените маршрут навигации в службе печати на 

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