zoukankan      html  css  js  c++  java
  • [Angular] Export directive functionalities by using 'exportAs'

    Directive ables to change component behaives and lookings. Directive can also export some APIs which enable behaivor changes control by outside directive iteslf.

    For example, we have an tooltip:

    It is a directive:

    import { Input, Directive, ElementRef, OnInit } from '@angular/core';
    
    @Directive({
      selector: '[tooltip]',
      exportAs: 'tooltip'
    })
    export class TooltipDirective implements OnInit {
      tooltipElement = document.createElement('div');
      @Input()
      set tooltip(value) {
        this.tooltipElement.innerText = value;
      }
    
      hide() {
        this.tooltipElement.classList.remove('tooltip--active');
      }
    
      show() {
        this.tooltipElement.classList.add('tooltip--active');
      }
    
      constructor(
        private element: ElementRef
      ) {}
    
      ngOnInit() {
        this.tooltipElement.className = 'tooltip';
        this.element.nativeElement.appendChild(this.tooltipElement);
        this.element.nativeElement.classList.add('tooltip-container');
      }
    }

    This tooltip should be hidden by default.

    We want to toggle show/hide by mouse over the '(?)' span:

    So just export the directive:

    @Directive({
      selector: '[tooltip]',
      exportAs: 'tooltip'
    })

    The html:

        <div>
          <label>
            Credit Card Number
            <input 
              name="credit-card" 
              type="text"
              placeholder="Enter your 16-digit card number"
              credit-card>
          </label>
          <label
            tooltip="3 digial only"
            #myTooltip="tooltip"
            >
            Enter your security code 
            <span
              (mouseover)="myTooltip.show()"
              (mouseout)="myTooltip.hide()">
              (?)
            </span>
            <input type="text">
          </label>
        </div>

    And html get use template ref to get the directive:

    #myTooltip="tooltip"

    Then we can control it in other place:

            <span
              (mouseover)="myTooltip.show()"
              (mouseout)="myTooltip.hide()">
              (?)
            </span>
  • 相关阅读:
    slice()、substring()、substr()的区别用法
    程序员如何快速上手一个自己不太熟悉的新项目?有什么技巧?
    计算重复字符串长度
    计算机视觉算法研发岗招聘要求
    C++进阶STL-2
    C++进阶STL-1
    拼硬币
    序列找数
    寻找合法字符串
    字符串是否由子串拼接
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6532826.html
Copyright © 2011-2022 走看看