[JavaScript知识库]给nzContent引入外来的HTML模板

声明：

这里的nzContent是NG-ZORRO of angular 的Modal对话框里的内容
修改下图中，红框标注的位置。官网是用反引符引入的HTML代码，但是，我们要是使用负责的样式呢？

1、绑定简单的数据

// name = 小明
<b style="color: red;">${name}</b>

2、绑定复杂的数据

1、在HTML页面写结构
2、在ts里写逻辑
3、绑定到nzContent里
代码：

// 引入ViewChild
import { ViewChild, TemplateRef, ChangeDetectorRef } from '@angular/core';

// 拿到dom节点
@ViewChild('tplContent', { static: false }) tplContent!: any;


// 使用节点 this.tplContent
 this.modal.confirm({
      nzTitle: '您确定要删除此项吗?',
      nzContent: this.tplContent,
      nzOkText: '确定',
      nzOkType: 'danger',
      nzWidth: 600,
      nzOnOk: () => {
      
      },
      nzCancelText: '取消',
      nzOnCancel: () => console.log('Cancel')
    });

      <ng-template #tplContent let-params>
        <p>当前删除的描述是：</p>
        <p *ngFor="let item of nameList">{{item}}</p>
      </ng-template>

3、绑定新的组件页面

我们可以创建一个新的页面组件，并把这个页面的所有内容引入这个对话框里

 // tslint:disable-next-line:typedef
  createOrEdit(id: any) {
  // CreateOrEditReportModalComponent是组件页面名
    this.modal.create({
      nzContent: CreateOrEditReportModalComponent,
      nzComponentParams: {
      // 为对话框传递id，title，在CreateOrEditReportModalComponent页面接收
        id: id,
        title: '新对话框',
      },
      // 设置对话框的宽
      nzWidth: '1200px'
    }).afterClose.subscribe((res: any) => {
      if (res) {
      // 接收对话框传来的值，并对对话框的值进行处理
        console.log(res);
        }).catch(err => err);
      }
    });
  }

新页面设置：
创建组件页面
ng g c pages/create-or-edit-report-modal
html页面就是放在对话框的东西

// 头部
<div *nzModalTitle>
 <div class="modal-title">
   <span>{{title}}</span>
 </div>
</div>
// 身体
<fieldset> 
</fieldset>
// 脚部
<div *nzModalFooter>
	<button nz-button [nzType]="'default'" type="button" (click)="close()" > 取消 </button>
	<button nz-button [nzType]="'primary'" type="submit" > 保存 </button>
</div>

剩下的改天在写吧

官方源代码：

import { Component } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';

@Component({
  selector: 'nz-demo-modal-confirm',
  template: `
    <button nz-button nzType="primary" (click)="showConfirm()">Confirm</button>
    <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoModalConfirmComponent {
  constructor(private modal: NzModalService) {}

  showConfirm(): void {
    this.modal.confirm({
      nzTitle: '<i>Do you Want to delete these items?</i>',
      nzContent: '<b>Some descriptions</b>',
      nzOnOk: () => console.log('OK')
    });
  }

  showDeleteConfirm(): void {
    this.modal.confirm({
      nzTitle: 'Are you sure delete this task?',
      nzContent: '<b style="color: red;">Some descriptions</b>',
      nzOkText: 'Yes',
      nzOkType: 'primary',
      nzOkDanger: true,
      nzOnOk: () => console.log('OK'),
      nzCancelText: 'No',
      nzOnCancel: () => console.log('Cancel')
    });
  }
}