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>
  • 相关阅读:
    WPF之元素绑定
    BC9050的IP地址设置
    C#之进程、线程
    EPLAN学习笔记01
    Beckhoff模拟量模块的使用
    倍福-基于EL2521的NC轴控制
    kali之ARP欺骗获取图片流
    PHP脚本实现凯撒加(解)密
    SQL注入(一)普通型注入
    linux卸载不完全
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6532826.html
Copyright © 2011-2022 走看看