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>
  • 相关阅读:
    DS博客作业08--课程总结
    DS博客作业07-----查找
    DS博客作业06--图
    DS博客作业05--树
    DS博客作业08--课程总结
    DS博客作业07--查找
    DS博客作业06--图
    DS博客作业05--树
    DS博客作业03--栈和队列
    DS博客作业02--线性表
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6532826.html
Copyright © 2011-2022 走看看