Schließen Sie das Schreiben der Nachrichtenkomponente mit Angular ab-js-Tutorial-php.cn

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

  @Input() payload:string = &#39;&#39;

  private typeClass
  private typeIconClass
}

Nach dem Login kopieren

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

Nach dem Login kopieren

.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;
 }

Nach dem Login kopieren

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:

Anbieter bereitstellen
Injector-Instanz erstellen
ComponetFactory erstellen
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

Nach dem Login kopieren

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 &#39;@angular/core&#39;;
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;
  }
}

Nach dem Login kopieren

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

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

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

  }

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

Nach dem Login kopieren

Nachrichtendienst

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

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

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

Nach dem Login kopieren

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 &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import {MessageComponent} from &#39;./message.component&#39;;
import {MessageService} from &#39;./message.service&#39;;
import {ComponentLoaderFactory} from &#39;../component-loader/component-loader.factory&#39;;

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

Nach dem Login kopieren

Verwenden Sie die Methode

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

this._msgService.success(&#39;成功了!&#39;);

Nach dem Login kopieren

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!