zoukankan      html  css  js  c++  java
  • [Angular 2] Directive intro and exportAs

    First, What is directive, what is the difference between component and directive.

    For my understanding,

    • component is something like 'canvas', 'form', 'table'... they have the template and their own functionality. It defines how a html tag should work like and look like.
    • directive is something like 'ngIf', 'required', 'checked'... they don't necessary to have their own template (of course they can have). It change the original component way to work or looks like.

    Basic 'directive' and 'component' they are quite similar, so just follow the rules when you want to choose using 'directive' or 'component':

    1. Add something new to the DOM with its own template, using component
    2. Modify something (can be functionality or template) already in teh DOM, using directive.

    What we want to build is collapse directive:

    When you double click the panel, it will toggle the content show / hide and change the icon.

    Also when you click the button which outside the panel, you will also be able to toggle the panel.

    So it requires you know 

    • How to deal with Host elm's events --> @HostListener
    • How to deal with Host elm's attrs --> @HostBinding
    • How to export directive as API for the component which stay outside the host elm to use --> exportAs

    First. let's see how to toggle it by using @HostListener & @HostBinding:

    the host element html:

            <div collapse-on-click 
                 class="card card-strong disable-text-selection">
                <i class="md-icon collapsible-indicator" >arrow_drop_down</i>
                <i class="md-icon collapsible-indicator" >arrow_drop_up</i>
               
                <div class="collapsible-section" >   
                    This page section is collapsible, double click it and it will collapse or expand.
                </div>
            </div>

    css:

    .collapsed .collapsible-section{
        display: none;
    }

    directive:

    import {Directive, HostListener, HostBinding} from "@angular/core";
    @Directive({
        selector: '[collapse-on-click]'
    })
    export class CollapseOnClick {
    
        collapsed:boolean;
        constructor(){
            this.collapsed = false;
        }
    
        // set "collapsed" class to the host element according to
        // this.collapsed value
        @HostBinding('class.collapsed')
        get isCollapsed(){
            return this.collapsed;
        }
    
        // if the double click the host element, will fire toggle function
        @HostListener('dblclick')
        toggle(){
            this.collapsed = !this.collapsed;
        }
    }

    So everytime, when you double click the host element, it will run 'toggle()' function, it will change 'this.collapsed' value to true or false. Then we have a getter and setter to get and set 'this.collapsed'. According to 'this.collapsed', we will add 'collapsed' class to host element. This class will help to hide the content, as we define in css file.

    So when toggle: true: the host html will change to:

    <div collapse-on-click 
                 class="card card-strong disable-text-selection collasped">

    When toggle: false:

    <div collapse-on-click 
                 class="card card-strong disable-text-selection">

    To switch the icon, we can use template reference from directive:

    @Directive({
        selector: '[collapse-on-click]',
        exportAs: 'collapsible'
    })

    We define exportAs, which we can refer in host html:

            <div collapse-on-click #panel="collapsible"
                 class="card card-strong disable-text-selection">
                <i class="md-icon collapsible-indicator" *ngIf="!panel.collapsed">arrow_drop_down</i>
                <i class="md-icon collapsible-indicator" *ngIf="panel.collapsed">arrow_drop_up</i>
               
                <div class="collapsible-section" >   
                    This page section is collapsible, double click it and it will collapse or expand.
                </div>
            </div>

    And one improvement for using template reference is we not longer need to depend on a css class 'collapsed', to show / hide the content, we can just use ngIf.

            <div collapse-on-click #panel="collapsible"
                 class="card card-strong disable-text-selection">
                <i class="md-icon collapsible-indicator" *ngIf="!panel.collapsed">arrow_drop_down</i>
                <i class="md-icon collapsible-indicator" *ngIf="panel.collapsed">arrow_drop_up</i>
               
                <div class="collapsible-section" *ngIf="!panel.collapsed">   
                    This page section is collapsible, double click it and it will collapse or expand.
                </div>
            </div>

    This way can make the direcitve more reuseable

    Another benifite for using tempalte reference is that, we can call directive function or access directive props by ref. 

            <div collapse-on-click #panel="collapsible"
                 class="card card-strong disable-text-selection">
                <i class="md-icon collapsible-indicator" *ngIf="!panel.collapsed">arrow_drop_down</i>
                <i class="md-icon collapsible-indicator" *ngIf="panel.collapsed">arrow_drop_up</i>
               
                <div class="collapsible-section" *ngIf="!panel.collapsed">   
                    This page section is collapsible, double click it and it will collapse or expand.
                </div>
            </div>
            <hr />
            <button (click)="panel.toggle()">Toggle: {{panel.collapsed}}</button>

    So, we add a button, which stay outside the host element. When it clicked, it will also call the toggle() method on directive to show / hide the content.

    Notice: another way to write @HostListener:

    @Directive({
        selector: '[collapse-on-click]',
        exportAs: 'collapsible',
        host: {
            '(dblclick)': 'toggle()'
        }
    })

    It is also clear.

    ------------------

    app.ts:

    import {Component} from "@angular/core";
    import {NgModule} from "@angular/core";
    import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
    import {BrowserModule} from "@angular/platform-browser";
    
    import {CollapseOnClick} from "./collapse-on-click.directive";
    
    
    
    @Component({
        selector:'app',
        template: `
            
            <div collapse-on-click #panel="collapsible"
                 class="card card-strong disable-text-selection">
                <i class="md-icon collapsible-indicator" *ngIf="!panel.collapsed">arrow_drop_down</i>
                <i class="md-icon collapsible-indicator" *ngIf="panel.collapsed">arrow_drop_up</i>
               
                <div class="collapsible-section" *ngIf="!panel.collapsed">   
                    This page section is collapsible, double click it and it will collapse or expand.
                </div>
            </div>
            <hr />
            <button (click)="panel.toggle()">Toggle: {{panel.collapsed}}</button>
            `
    })
    export class App {
    
    
    }
    
    @NgModule({
        declarations: [App, CollapseOnClick],
        imports: [BrowserModule],
        bootstrap: [App]
    })
    export class AppModule {
    
    }
    
    platformBrowserDynamic().bootstrapModule(AppModule);

    collapsed-on-click.ts:

    import {Directive, HostListener, HostBinding} from "@angular/core";
    @Directive({
        selector: '[collapse-on-click]',
        exportAs: 'collapsible'
    })
    export class CollapseOnClick {
    
        collapsed:boolean;
        constructor(){
            this.collapsed = false;
        }
    
        // set "collapsed" class to the host element according to
        // this.collapsed value
        /*@HostBinding('class.collapsed')
        get isCollapsed(){
            return this.collapsed;
        }*/
    
        // if the double click the host element, will fire toggle function
        @HostListener('dblclick')
        toggle(){
            this.collapsed = !this.collapsed;
        }
    }
  • 相关阅读:
    photoSlider-原生js移动开发轮播图、相册滑动插件
    JavaScript库开发者们的规则
    如何提高手机APP的用户体验?
    html清除浮动的6种方法
    JS内存泄露常见原因
    web前端开发规范文档
    jQuery无缝循环开源多元素动画轮播jquery.slides插件
    9种CSS3炫酷图片展开预览展示动画特效
    纯css3 transforms 3D文字翻开翻转3D开放式效果
    html5+css3第一屏滚屏动画效果
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5870488.html
Copyright © 2011-2022 走看看