angular - 根应用程序未使用命名路由器路由到组件模块
问题描述
这是我上一个问题的后续问题。我printService.printDocument
在尝试使用断点调试代码时执行路由器导航。但是router.navigate()
调用没有对流程产生任何影响,并且控制没有到达InvoiceComponent
构造函数。
打印服务.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 }}]);
});
}
}
应用程序路由.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 构造函数?
解决方案
将您的路线更改为如下所示:
const routes: Routes = [
{ path: 'print',
outlet: 'print',
component: PrintLayoutComponent,
children: [
{ path: '/:invoiceIds/:additionalParams', component: InvoiceComponent }
]
}
];
或将打印服务中的导航路线更改为
this.router.navigate(['/',
{outlets: {
'print': ['invoice', documentName, documentData.join()]
}}]);
推荐阅读
- javascript - TogetherJS 的实现不起作用
- microservices - 更改 jhipster-registry 端口
- javascript - 调用 onClick() 时切换按钮值 React
- c# - Visual Studio Code 突然失去了 Unity 的自动完成功能
- python - 如何确保在 selenium python 中加载网页
- scala - Scala 3 中的类型推断变化
- python - SQL TIMESTAMP DEFAULT CURRENT TIMESTAMP:如何删除毫秒?
- python-3.x - RuntimeError: 为 Actor 加载 state_dict 时出错 - torch.load()
- python - 多处理:AMD 32 核处理器:未使用所有内核
- amazon-web-services - Aws Glue pypark UDF 抛出错误调用 o104.showString 时发生错误。Traceback(最近一次通话最后一次)