zoukankan      html  css  js  c++  java
  • [Angular] Implementing A General Communication Mechanism For Directive Interaction

    We have modal implement and now we want to implement close functionality. 

    Becuase we use a structure directive to do open modal on click functionality. So as you can see, the directive and modal component is spreated. We need to have some way to communcation between directive and component. 

      <ng-template [auModalOpenOnClick]="[loginButton, signUpButton]">
        <au-modal class="auth-modal" [body]="newModelBody">
           <!-- modal body -->
        </au-modal>
      </ng-template>

    One general communction mechanism is though serivce. 

    So we need to create a service which only for AuModal component:

    import {NgModule, ModuleWithProviders} from '@angular/core';
    import {AuModalComponent} from './au-modal.component';
    import {CommonModule} from '@angular/common';
    import { AuModalOpenOnClickDirective } from './au-modal-open-on-click.directive';
    import {AuModalService} from 'app/au-modal/au-modal.service';
    
    @NgModule({
      declarations: [AuModalComponent, AuModalOpenOnClickDirective],
      imports: [
        CommonModule
      ],
      exports: [
        AuModalComponent,
        AuModalOpenOnClickDirective
      ]
    })
    export class AuModalModule {
    
      /*
      * Inject AuModuleService here instead of global providers is for lazy loading
      * to prevent duplicate serivce name.
      * */
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: AuModalModule,
          providers: [
            AuModalService
          ]
        }
      }
    }

    Because we don't want it to be global, it might affect lazy loading, have naming conflicts with other third party libs. Therefore we use 'forRoot' static method on the AuModalModule. This approach is good for lazy loading.

    Service:

    Service is Observable based implementation. It mean we gonna have one public method call 'close' and an public observable variable call 'close$'.

    Once close() method was called, 'close$' can get notifiied.

    import { Injectable } from '@angular/core';
    import {Observable} from 'rxjs/Observable';
    import {Subject} from 'rxjs/Subject';
    
    @Injectable()
    export class AuModalService {
    
      private subject = new Subject();
      close$: Observable<any> = this.subject.asObservable();
      constructor() { }
    
      close() {
        this.subject.next();
      }
    
    }

    AuModal component: We want user click outside modal body to close the modal, so we bind 'closeModal' function tot he overlay wrapper. And also we don't want user click modal body itself to trigger the close event also. So we have second method called 'cancelCloseModal' to stop event propagation.

    <div class="modal-overlay" (click)="closeModal()">
    
      <div class="modal-body" (click)="cancelCloseModal($event)">
    
        <ng-container *ngIf="body; else projectionBody">
          <ng-container *ngTemplateOutlet="body"></ng-container>
        </ng-container>
    
        <ng-template #projectionBody>
          <ng-content></ng-content>
        </ng-template>
    
      </div>
    
    </div>
      closeModal() {
        this.auModelService.close();
      }
    
      cancelCloseModal(evt: KeyboardEvent) {
        evt.preventDefault();
        evt.stopPropagation();
      }

    Now the only thing leave to do is subscribe the 'close$' observable inside the directive, once event was triggered, we clear the component.

    Directive:

    import {Directive, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
    import {AuModalService} from './au-modal.service';
    
    @Directive({
      selector: '[auModalOpenOnClick]'
    })
    export class AuModalOpenOnClickDirective implements OnInit{
      ngOnInit(): void {
        this.auModalService.close$
          .subscribe(() => this.viewContainer.clear());
      }
    
      @Input()
      set auModalOpenOnClick (els) {
    
        let elements: HTMLBaseElement[];
    
        if(Array.isArray(els)) {
          elements = els;
        } else {
          elements = [els];
        }
    
        elements.forEach(el => {
          el.addEventListener('click', () => {
            this.viewContainer.clear();
            this.viewContainer.createEmbeddedView(this.template);
          });
        });
      }
    
      constructor(
        private template: TemplateRef<any>,
        private viewContainer: ViewContainerRef,
        private auModalService: AuModalService
      ) { }
    
    }
  • 相关阅读:
    菜鸟快速自学java00之变量类型
    php 接口和抽象类
    java 三大特性之多态性
    设计模式
    依赖注入
    Java设计模式工厂模式
    php 设计模式之策略模式
    大数的概述
    熟悉常用的Linux操作
    GridView动态添加列
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7100393.html
Copyright © 2011-2022 走看看