zoukankan      html  css  js  c++  java
  • [Angular] Refactor Angular Component State Logic into Directives

    Allow the base toggle to be a tag (<toggle>) or attribute (<div toggle>). The <toggle> component has become less opinionated about the view, but has now taken on some responsibilities managing state. We’ll decouple the state management piece by moving it into the toggleProvider directive. The toggleProvider directive provides state for all the <toggle-off>, <toggle-on> and <toggle-button> components inside it.

    For toggle component we made in previous post

    @Component({
      selector: 'toggle',
      template: '<ng-content></ng-content>',
    })

    As you can see, it use 'ng-content' inside template which means that it doesn't actually needs a template, we can consider ToggleComponent as a directive.

    So we can modifiy ToggleComponet to ToggleDirective:

    import { Directive, Input, Output, EventEmitter } from '@angular/core';
    
    @Directive({
      selector: 'toggle, [toggle]'
    })
    export class ToggleDirective {
      @Input() on: boolean;
      @Output() toggle: EventEmitter<boolean> = new EventEmitter();
    
      setOnState(on: boolean) {
        this.on = on;
        this.toggle.emit(this.on);
      }
    }

    So we can change the usage in app.component.html:

    <div toggle (toggle)="onToggle($event)">
      <toggle-on>On</toggle-on>
      <toggle-off>Off</toggle-off>
      <toggle-off>Off</toggle-off>
      <other-component></other-component>
      <toggle-button></toggle-button>
    </div>

    Then change all the dependencies injection for toggle-on/off/button component, the application should still works.

    One problem for the current directive implementations is that each toggle directives are isolated:

    Most of times, isolated directives are OK, but in some cases, if you want to share the state between two or more directives. You have to do some extra works.

    Write ToggleProviderDirective for reference ToggleDirective.

    state <-- ToggleDirective <-- ToggleProviderDirective

    So ToggleDirective is managing the state, if we want to share the state, we create ToggleProviderDirective, it takes ToggleDirective as input, so that we can share one ToggleDirective thoughts multi directives.

    import { Directive, Input, Output, Host, OnChanges, SimpleChanges, Optional } from '@angular/core';
    import {ToggleDirective} from './toggle.directive';
    
    @Directive({
      exportAs: 'toggleProvider',
      selector: 'toggle, [toggle], [toggleProvider]',
    })
    export class ToggleProviderDirective implements OnChanges {
    
      @Input() toggleProvider: ToggleDirective;
    
      toggle: ToggleDirective = this.toggleDirective;
    
      constructor(
        // Reference the toggle directive on the same host element
        @Host() @Optional() private toggleDirective: ToggleDirective
      ) {
        
      }
    
      ngOnChanges(changes: SimpleChanges) {
        const {toggleProvider} = changes;
        if (toggleProvider) {
          this.toggle = this.toggleProvider || this.toggleDirective;
        }
      }
    }

    Also need to change the reference for toggle-on/off/button:

    import { Component } from '@angular/core';
    
    import { ToggleProviderDirective } from './toggle.toggleProvider.directive';
    
    @Component({
      selector: 'toggle-button',
      template: '<switch [on]="toggleProvider.toggle.on" (click)="onClick()" ></switch>',
    })
    export class ToggleButtonComponent  {
      constructor(public toggleProvider: ToggleProviderDirective) {}
    
      onClick() {
        this.toggleProvider.toggle.setOnState(!this.toggleProvider.toggle.on);
      }
    }

  • 相关阅读:
    <阿里工程师的自我素养>读后感-技术人应该具备的一些基本素质
    Hbase的基本原理(与HIVE的区别、数据结构模型、拓扑结构、水平分区原理、场景)
    大数据技术体系 && NoSQL数据库的基本原理
    软件测试面试经验
    APP非功能测试
    手机APP测试(测试点、测试流程、功能测试)
    性能测试学习之路 (四)jmeter 脚本开发实战(JDBC &JMS &接口脚本 & 轻量级接口自动化测试框架)
    HTML 实战生成一张页面
    前端性能测试(H5性能测试)
    JAVA基础——设计模式之观察者模式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9764179.html
Copyright © 2011-2022 走看看