zoukankan      html  css  js  c++  java
  • [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2

     Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.
     
     
    The syntax looks like:
    <h2 *three="let message from messages">{{message.to}} - {{message.message}}</h2>

    For template it would looks like:

    <template [threeFrom]="messages"></template>

    It combimes 'three' and 'from' keywords.

    So the directive would looks like:

    import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
    @Directive({
      selector: '[three]'
    })
    export class ThreeDirective {
      @Input() set threeFrom({one, two, three}) {this.view.createEmbeddedView(this.template, {
          $implicit: {
            to: "People" + Math.random(),
            message: two
          }
        });
    
        this.view.createEmbeddedView(this.template, {
          $implicit: {
            to: "People" + Math.random(),
            message: three
          }
        });
    
        this.view.createEmbeddedView(this.template, {
          $implicit: {
            to: "People" + Math.random(),
            message: one
          }
        });
      }
    
      constructor(private template: TemplateRef<any>, private view: ViewContainerRef) {
    
      }
    }
     
  • 相关阅读:
    解读Android 12首个开发者预览版
    Pod创建私有库
    Flutter常用网站
    Flutter常用快捷键
    多个网络请求-并发执行、顺序执行
    小猫爬山问题---贪心算法失效,深度优先搜索优化
    网络基本概念备忘:MAC地址,端口,HTTP状态码
    常见图片文件格式简析
    pdf2xls
    评分卡模型
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6290872.html
Copyright © 2011-2022 走看看