Schließen Sie das Schreiben der Nachrichtenkomponente mit Angular ab

In diesem Artikel wird hauptsächlich das Schreiben einer eckigen Version der Nachrichtenkomponente vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Der beste Weg, ein Framework oder eine Bibliothek zu erlernen, besteht darin, die offizielle Dokumentation zu lesen und mit dem Schreiben von Beispielen zu beginnen. Ich habe in letzter Zeit meine Freizeit genutzt, um Angular zu lernen, deshalb werde ich heute versuchen, eine Nachrichtenkomponente zu schreiben und die Nachrichtenkomponente dynamisch über den Nachrichtendienst zu laden.
Die Projekte, an denen ich teilnehme, werden grundsätzlich mit jquery abgeschlossen. Zuvor habe ich selbst ein einfaches Nachrichten-Plug-in im Projekt geschrieben, wie unten gezeigt.

Verwenden Sie nun Angular (Version 5.0.0), um die Nachrichtenkomponente zu implementieren.

Nachrichtenkomponente

Die Nachrichtenkomponente sollte entsprechend der eingehenden Art, Nachricht und Dauer angezeigt werden. Erstellen Sie drei Dateien: message.component.ts, message.component.html, message.component.css. Der Code lautet wie folgt.

//message.component.ts
import {Component,Input,OnInit,ChangeDetectionStrategy} from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate
 } from '@angular/animations';
const mapping={
  success:'glyphicon-ok-sign',
  warning:'glyphicon-exclamation-sign',
  error:'glyphicon-exclamation-sign',
  info:'glyphicon-ok-circle'
}
@Component({
  selector:'upc-ng-message',
  templateUrl:'./message.component.html',
  styleUrls:['./message.component.css'],
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class MessageComponent implements OnInit{
  ngOnInit(): void {
    this.typeClass=['upc-message-' + this.msgType];
    this.typeIconClass=[mapping[this.msgType]];
  }
  @Input() msgType:'success' | 'info' | 'warning' | 'error'='info'

  @Input() payload:string = ''

  private typeClass
  private typeIconClass
}

<!--*message.component.html-->
<p class="upc-message">
    <p class="upc-message-content" [ngClass]="typeClass">
      <i class="glyphicon" [ngClass]="typeIconClass"></i>
      {{payload}}
    </p>
</p>

.upc-message {
  position: fixed;
  z-index: 1999;
  width: 100%;
  top: 36px;
  left: 0;
  pointer-events: none;
  padding: 8px;
  text-align: center;
 }
 .upc-message i {
   margin-right: 8px;
   font-size: 14px;
   top: 1px;
   position: relative;
 }
 .upc-message-success i {
   color: green;
 }
 .upc-message-warning i {
   color: yellow;
 }
 .upc-message-error i {
   color: red;
 }
 .upc-message-content {
   padding: 8px 16px;
   -ms-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 2px 8px #000000;
   -ms-box-shadow: 0 2px 8px #000000;
   box-shadow: 0 2px 8px #000000;
   box-shadow: 0 2px 8px rgba(0,0,0,.2);
   background: #fff;
   display: inline-block;
   pointer-events: all;
 }

ComponentLoader

Im Abschnitt „Dynamische Komponenten“ des offiziellen Dokuments können Sie verstehen, dass die dynamische Erstellung von Komponenten über ComponentFactoryResolver abgeschlossen werden muss. Verwenden Sie ComponentFactoryResolver, um eine ComponentFactory zu erstellen, und erstellen Sie dann Komponenten über die Erstellungsmethode von ComponentFactory. Wenn man sich die API-Beschreibung im offiziellen Dokument ansieht, erfordert die Erstellungsmethode von ComponentFactory mindestens einen Injektorparameter, und die Erstellung des Injektors wird auch im Dokument erwähnt, wobei der Parameteranbieter die Klasse ist, die injiziert werden muss. Lassen Sie uns den gesamten Prozess klären:

1. Anbieter bereitstellen

2. Injector-Instanz erstellen

3. ComponetFactory erstellen

4. Verwenden Sie ComponetFactory, um ComponentRef zu erstellen

//ComponentFactory的create方法
create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any, ngModule?: NgModuleRef<any>): ComponentRef<C>

//使用Injector的create创建injector实例
static create(providers: StaticProvider[], parent?: Injector): Injector

Für die Code-Wiederverwendung wird hier eine allgemeine Loader-Klasse erstellt, um die dynamische Erstellung von Komponenten abzuschließen. Unter anderem wird die attch-Methode zum Initialisieren der ComponentFactory verwendet (der Parameter ist der Komponententyp); die Provider-Methode wird zum Initialisieren der injizierbaren Klasse verwendet; Wird zum Erstellen von Komponenten und zur manuellen Änderungserkennung verwendet. Die Entfernungsmethode wird zum Entfernen von Komponenten verwendet.

import {
  ComponentFactoryResolver,
  ComponentFactory,
  ComponentRef,
  Type,
  Injector,
  Provider,
  ElementRef
} from '@angular/core';
export class ComponentLoader<T>{
  constructor(private _cfr: ComponentFactoryResolver,
    private _injector: Injector) {
  }
  private _componentFactory: ComponentFactory<T>
  attch(componentType: Type<T>): ComponentLoader<T> {
    this._componentFactory = this._cfr.resolveComponentFactory<T>(componentType);
    return this;
  }
  private _parent: Element
  to(parent: string | ElementRef): ComponentLoader<T> {
    if (parent instanceof ElementRef) {
      this._parent = parent.nativeElement;
    } else {
      this._parent = document.querySelector(parent);
    }

    return this;
  }
  private _providers: Provider[] = [];
  provider(provider: Provider) {
    this._providers.push(provider);
  }
  create(opts: {}): ComponentRef<T> {
    const injector = Injector.create(this._providers as any[], this._injector);
    const componentRef = this._componentFactory.create(injector);
    Object.assign(componentRef.instance, opts);
    if (this._parent) {
      this._parent.appendChild(componentRef.location.nativeElement);
    }
    componentRef.changeDetectorRef.markForCheck();
    componentRef.changeDetectorRef.detectChanges();
    return componentRef;
  }
  remove(ref:ComponentRef<T>){
    if(this._parent){
      this._parent.removeChild(ref.location.nativeElement)
    }
    ref=null;
  }
}

Um die Erstellung des Loaders zu erleichtern, erstellen Sie gleichzeitig die LoaderFactory-Klasse. Der Code lautet wie folgt:

import {
  ComponentFactoryResolver,
  Injector,
  Injectable,
  ElementRef
} from '@angular/core';
import { ComponentLoader } from './component-loader.class';

@Injectable()
export class ComponentLoaderFactory {
  constructor(private _injector: Injector,
    private _cfr: ComponentFactoryResolver) {

  }

  create<T>(): ComponentLoader<T> {
    return new ComponentLoader(this._cfr, this._injector);
  }
}

Nachrichtendienst

Der Nachrichtendienst bietet die Anzeige der Nachrichten-API. Der Code lautet wie folgt:

import {Injectable,Injector} from '@angular/core';
import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
import {MessageComponent} from './message.component';
import {ComponentLoader} from '../component-loader/component-loader.class';

@Injectable()
export class MessageService{
  constructor(private _clf:ComponentLoaderFactory,private _injector:Injector){
    this.loader=this._clf.create<MessageComponent>();
  }
  private loader:ComponentLoader<MessageComponent>
  private createMessage(t,c,duration=2000){
    this.loader.attch(MessageComponent).to(&#39;body&#39;);
    const opts = {
      msgType: t,
      payload:c
    };
    const ref = this.loader.create(opts);
    ref.changeDetectorRef.markForCheck();
    ref.changeDetectorRef.detectChanges();
    let self=this;
    let st = setTimeout(() => {
      self.loader.remove(ref);
    }, duration);
  }
  public info(payload,duration?) {
    this.createMessage(&#39;info&#39;,payload,duration);
  }
  public success(payload,duration?) {
    this.createMessage(&#39;success&#39;,payload,duration);
  }
  public error(payload,duration?) {
    this.createMessage(&#39;error&#39;,payload,duration);
  }
  public warning(payload,duration?) {
    this.createMessage(&#39;warning&#39;,payload,duration);
  }
}

message.module

Fügen Sie abschließend message.module.ts hinzu. Denken Sie daran, dynamisch erstellte Komponenten zum Array „entryComponents“ hinzuzufügen.

import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {MessageComponent} from './message.component';
import {MessageService} from './message.service';
import {ComponentLoaderFactory} from '../component-loader/component-loader.factory';

@NgModule({
  imports:[CommonModule],
  declarations:[MessageComponent],
  providers:[MessageService,ComponentLoaderFactory],
  entryComponents:[MessageComponent],
  exports:[MessageComponent]
})
export class MessageModule{
}

Verwenden Sie die Methode

, um MessageService zu injizieren und die API aufzurufen, um die Message-Komponente zu verwenden.

this._msgService.success('成功了!');

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erzielen Sie den Display-Box-Effekt in der Vue-Komponente Toast

Über die Regelparameterverarbeitung im Webpack

So implementieren Sie einfache Berechnungen in AngularJS

Das obige ist der detaillierte Inhalt vonSchließen Sie das Schreiben der Nachrichtenkomponente mit Angular ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!