将参数传递给弹出对话框答案

【问题标题】：Passing parameters to popup dialog将参数传递给弹出对话框
【发布时间】：2019-07-21 15:58:59
【问题描述】：

我将 id 从一个组件传递到另一个组件并遇到此错误。

“无法读取属性“id” of null”

--> 父路由（/order.component）

我有一个名为“付款”的按钮，并使用下面的代码进行导航

[routerLink]="['/order/payment'];

--> 其他路由 (/order-payment.component) -> 不确定如何将其注册为子路由。如上所示，我使用 routerLink 导航到订单支付页面

一次，我到达付款页面。我喜欢通过点击支付按钮将订单 ID 传递给模态对话框以进行一些处理。

再次使用 routerLink，

[routerLink]="['/', 'order', { outlets: { popup: order.id + '/payment'} }]"

点击支付按钮后，这会出现在我的网址中：

order/(payment//popup:3/processPayment)

route.ts

export const OrderRoute: Routes = [
{
    path: '',
    component: OrderComponent,
    resolve: {
        pagingParams: JhiResolvePagingParams
    },
    data: {
        authorities: ['ROLE_USER'],
        defaultSort: 'id,asc',
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService]
},
{
    path: ':id/view',
    component: OrderDetailComponent,
    resolve: {
        order: OrderResolve
    },
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService]
},

{
    path: ':id/processPayment',
    component: PaymentPopupComponent,
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService],
    outlet: 'popup'
}

订单页面

按钮 ([routerLink]="['/order/payment'];)

支付页面

按钮（[routerLink]="['/', 'order', { outlets: { popup: order.id + '/payment'} }]"）

【问题讨论】：

标签： angular jhipster

【解决方案1】：

您可以使用激活的路由访问 PaymentPopupComponent 中的 :id 参数

constructor(private route: ActivatedRoute) {}
id = this.route.snapshot.url[0].path;
// or
this.route.params.subscribe((param) => {
    this.id = param.id; 
})

或类似的东西。

【讨论】：