zoukankan      html  css  js  c++  java
  • [Angular] Using ngTemplateOutlet to create dynamic template

    I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in the DOM. If we don't wanner this empty div, we can actually using ng-conainer together with ngTemplateOutlet (for template ref) and ngTemplateOutletContext (the context).

    import { Component, TemplateRef, ComponentRef, ViewContainerRef, ViewChild, AfterContentInit, ComponentFactoryResolver } from '@angular/core';
    
    import { AuthFormComponent } from './auth-form/auth-form.component';
    
    import { User } from './auth-form/auth-form.interface';
    
    @Component({
      selector: 'app-root',
      template: `
        <div>
          <div #entry></div>
          <template #tmpl let-obj let-location="location">
              <details>
                <summary>{{obj.name}}</summary>
                <p> - Age: {{obj.age}}</p>
                <p> - Address :{{location}}</p>
              </details>
          </template>
          <hr />
          <ng-container 
          [ngTemplateOutlet]="tmpl"
          [ngTemplateOutletContext]="ctx"
          ></ng-container>
        </div>
      `
    })
    export class AppComponent implements AfterContentInit {
    
      @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
      @ViewChild('tmpl') tmpl: TemplateRef<any>;
    
      ctx = {
        $implicit: {
          name: 'John',
          age: 34
        },
        location: 'USA'
      }
    
      ngAfterContentInit() {
        this.entry.createEmbeddedView(this.tmpl, {
          $implicit: {
            name: 'Zhentian',
            age: 27
          },
          location: 'China'
        })
      }
    
    }

    And in the generated DOM we can see that there is no empty div created.

  • 相关阅读:
    ThinkPHP讲解(一)框架基础
    smarty简单介绍
    留言板
    文件系统处理
    文件上传(带有预览模式)
    文件上传(无预览模式版)
    注册、登陆、审核练习
    session讲解(二)——商城购物车练习
    session讲解(一)——登录网页练习
    P6216 回文匹配
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6511531.html
Copyright © 2011-2022 走看看