zoukankan      html  css  js  c++  java
  • [Angular Directive] Write a Structural Directive in Angular 2

    Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.

    What is stuctural looks like: 

    <h1 *structure>This is structure directive</h1>
    
    <!-- Equals to --> 
    <template structure>
        <h1>This is structure directive</h1>
    </template>

    So Structural Directive is just something shorthand for template.

    import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core';
    
    @Directive({
      selector: '[structure]'
    })
    export class StructureDirective {
    
      @Input('structure') num;
    
      constructor(private template: TemplateRef<any>,
                  private view: ViewContainerRef) {
      }
    
      ngAfterContentInit() {
    
        let num: number = Number(this.num);
        if (num > 0) {
          while (num --){
            this.view.createEmbeddedView(this.template);
          }
        }
    
      }
    }
    <h1 *structure="'4'">This is structure directive</h1>

    So it will print out:

  • 相关阅读:
    搜索框下拉列表
    定时器修改button标题闪烁
    按钮设置文字图片排版
    SSKeychain
    IQKeyboardManager
    App内存性能优化
    支付宝集成
    友盟分享
    iOS 线程同步 加锁 @synchronized
    iOS 线程同步-信号量 dispatch_semaphore
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6212895.html
Copyright © 2011-2022 走看看