问答

通过js生成的ng-zorro的代码如何加载到页面内?

作者:admin 2021-04-21 我要评论

一般这部分代码放在xx.component.html,会自动编译成页面 nz-row nzGutter="15" nz-col [nzSpan]="6" nz-select [(ngModel)]="formData.field102" nzPlaceHolder=...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image
一般这部分代码放在xx.component.html,会自动编译成页面

<nz-row nzGutter="15">
   <nz-col [nzSpan]="6">
     <nz-select [(ngModel)]="formData.field102" nzPlaceHolder="请选择下拉选择" [ngStyle]="{'width': '100%'}">
       <nz-option *ngFor="let item of selectOptions; index as index" [nzLabel]="item.label"
         [nzValue]="item.value" [nzDisabled]="item.disabled"></nz-option>
     </nz-select>
   </nz-col>
   <nz-col [nzSpan]="6">
     <nz-date-picker [ngStyle]="{'width': '100%'}" nzPlaceHolder="请选择日期选择" [nzAllowClear]="false"
       (ngModelChange)="datePickChange()"></nz-date-picker>
   </nz-col>
   <nz-col [nzSpan]="4">
     <button nzType="primary" nz-button nzSize="medium">主要按钮</button>
   </nz-col>
 </nz-row>

但现在是js内处理完的代码就是上面这些,如何才能渲染/加载到页面上呢

###

看描述你应该是想在运行时,动态的组装和插入视图模板。并使它能够渲染和执行数据绑定。
这个跟 ng-zorro 组件库本身没有关系。可以使用compiler.compileModuleAndAllComponentsAsync 动态创建组件来实现,毕竟,组件和模块也不过是装饰器修饰的类而已,而装饰器本身也就是个函数。

代码大概思路是:
创建一个负责动态生成组件的函数:

let temple = `<div style="border: 1px solid blue; margin: 5px; padding: 5px">
    <h4>动态插入字符串组件 </h4>
    <h5>绑定值: {{data.some}}</h5>
    <h4>显示 zorro 组件</h4>
    <nz-row nzGutter="15">
        <nz-col [nzSpan]="4">
            <button nzType="primary" nz-button nzSize="medium">主要按钮</button>
        </nz-col>
    </nz-row>
</div>`

动态的创建组件,并插入 <div #vc> 位置

@Component({
  selector: 'dynamic-example',
  template: `<h2>下面是动态组装部分<h2>
          <div #vc></div>`
})
export class DynamicTemplateComponent {
    @ViewChild('vc', { read: ViewContainerRef }) vc?: ViewContainerRef;
    private cmpRef?: ComponentRef<any>;
    
    // 注入依赖
    constructor(
        private compiler: Compiler,
        private injector: Injector,
        private moduleRef: NgModuleRef<any>,
    ) { }

    ngAfterViewInit() {
        // 使用字符串模板创建组件
        const tmpCmp = Component({ template })(class {
            data = {
                some: '123'
            };
        });

        // 同时也需要为这个组件创建动态的模块
        // 注意引入需要的 zorro 模块
        const tmpModule = NgModule({
            imports: [
                CommonModule,
                NzGridModule,
                NzButtonModule
            ],
            declarations: [tmpCmp]
        })(class { });

        this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
            .then((factories) => {
                const f = factories.componentFactories[0];
                this.cmpRef = f.create(this.injector, [], null, this.moduleRef);
                this.cmpRef.instance.name = 'my-dynamic-component';
                this.vc?.insert(this.cmpRef.hostView);
            });
    }
}

测试效果如下:
image

代码示例:Github

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 通过js生成的ng-zorro的代码如何加载到

    通过js生成的ng-zorro的代码如何加载到

  • mac下 vscode怎么重启ts服务?

    mac下 vscode怎么重启ts服务?

  • 2021-02-28:给定一个整型数组arr,和

    2021-02-28:给定一个整型数组arr,和

  • 为什么以下flutter代码不能正常运行?

    为什么以下flutter代码不能正常运行?

腾讯云代理商
海外云服务器