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>
  • 相关阅读:
    XML相关知识点
    MLPlatform开发日志
    1.0 es6 箭头函数
    基本数学概念
    4.4 thymeleaf使用补充
    vim操作手册
    eclise创建后台项目
    正则表达式
    数据库隔离级别
    1. gradle的使用教程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6532826.html
Copyright © 2011-2022 走看看