Ng-zorro-antd: 使用NzModalService创建nzContent为TemplateRef的modal时能够将ngTemplateOutletContext参数传入

Created on 17 Mar 2019  ·  3Comments  ·  Source: NG-ZORRO/ng-zorro-antd

What problem does this feature solve?

当我在使用TemplateRef作为nzContent时,我会期望能够在调用nzModalService的create方法时动态的传入某些参数,并且在modal销毁之后不再保存它们,而我也看到在使用component作为nzContent时我们有nzComponentParams作为一个传入参数的方法,但使用templateRef时无法传入ngTemplateOutletContext。当我需要用到这样的功能时,必须单独为这个template写一个component将其封装在里面,但是很多时候其实那只是一个输入框用来回复评论等这样的非常简单的功能,而且如果这是一种推荐的解决方法的话,那么理论上所有的使用template创建的modal都可以换成使用component创建,nzContent并不需要支持templateRef类型的传入。
希望我的说明足够清楚。
感谢你们在NG-ZORRO上的付出!

What does the proposed API look like?

可以是在nzComponentParams之外额外增加一个nzTemplateParams,也可以是把它和nzComponentParams合并,nzContentParams之类的参数进行传入,在创建modal的时候根据nzContent的类型判断是作为component的params传入还是ngTemplateOutletContext进行传入

Discussion Modal

Most helpful comment

The feat is supported via #4702, you can use it like this:

{
  nzContent: tplContent,
  nzComponentParams: {
    value: 'Template Context'
  }
}
<ng-template #tplContent let-params let-ref="modalRef">
  <p>{{ params.value }}</p>
  <button nz-button (click)="ref.destroy()">Destroy</button>
</ng-template>

All 3 comments

I've meet the same problem, it's hard to use modal with template ref and template context.
Does anyone have any opinions on this?

The better api for template ref may be like this:

async showConfigDist(id: string | number) {
    const dist = await this.queryConfig(id);
    // use temp variable instead of class context filed
    // this.modalContent.config = yamljs.safeDump(JSON.parse(dist.data));
    this.modal.info({
      nzTitle: "Configs",
      nzWidth: 800,
      nzContent: this.configDataTpl,
      nzTemplateRefContext: {
        content: yamljs.safeDump(JSON.parse(dist.data))
      }
    });
  }

The feat is supported via #4702, you can use it like this:

{
  nzContent: tplContent,
  nzComponentParams: {
    value: 'Template Context'
  }
}
<ng-template #tplContent let-params let-ref="modalRef">
  <p>{{ params.value }}</p>
  <button nz-button (click)="ref.destroy()">Destroy</button>
</ng-template>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

JCqiu picture JCqiu  ·  3Comments

hsuanxyz picture hsuanxyz  ·  3Comments

qdwxlong picture qdwxlong  ·  4Comments

DoesntWong picture DoesntWong  ·  3Comments

rafaelsmith picture rafaelsmith  ·  3Comments