• [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.

  • 相关阅读:
    cookie加密
    【雅思】【绿宝书错词本】List1~12
    【日语】【标日初下单词】45~48课
    【日语】【标日初下单词】41~44课
    【日语】【标日初下单词】37~40课
    【日语】【标日初下单词】33~36课
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6511531.html
Copyright © 2020-2023  润新知