[Angular] Refactor Angular Component State Logic into Direct

发布时间：2020-12-17 07:05:12 所属栏目：安全来源：网络整理

导读：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

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,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);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!