Erfahren Sie mehr über die Abhängigkeitsinjektion in Angular-js-Tutorial-php.cn

Erfahren Sie mehr über die Abhängigkeitsinjektion in Angular

青灯夜游

Freigeben： 2021-02-22 17:55:56

nach vorne

1487 Leute haben es durchsucht

Dieser Artikel führt Sie in die Abhängigkeitsinjektion in Angular ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Erfahren Sie mehr über die Abhängigkeitsinjektion in Angular

Verwandte Empfehlungen: „Angular-Tutorial“

Abhängigkeitsinjektion: Entwurfsmuster

Abhängigkeit: ein bestimmter Objekttyp, der im Programm benötigt wird.

Dependency Injection Framework: Ein Engineering-Framework

Injector: Verwenden Sie seine API, um Instanzen von Abhängigkeiten zu erstellen

Provider: Wie wird es erstellt? (Konstruktor, technische Funktion)

Objekt: von Komponenten und Modulen benötigte Abhängigkeiten

Erweiterte Abhängigkeitsinjektion => Das Abhängigkeitsinjektions-Framework in Angular bietet Eltern-Kind-Abhängigkeiten vom Typ „hierarchische Injektion“

1. Abhängigkeitsinjektion

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor() {
    this.id = Id.getInstance("idcard");
    this.address = new Address("北京", "背景", "朝阳区", "xx街道");
  }
}

Nach dem Login kopieren

Problem: Die Person muss die Implementierungsdetails von Adresse und ID genau kennen.

Nachdem die ID und die Adresse rekonstruiert wurden, muss die Person wissen, wie sie sie rekonstruieren kann.

Mit zunehmender Projektgröße können Integrationsprobleme auftreten.

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor(id: Id, address: Address) {
    this.id = id;
    this.address = address;
  }
}

main(){
  //把构造依赖对象，推到上一级，推调用的地方
  const id = Id.getInstance("idcard");
  const address = new Address("北京", "背景", "朝阳区", "xx街道");
  const person = new Person(id , address);
}

Nach dem Login kopieren

Person kennt die Details von ID und Adresse nicht mehr.

Dies ist die einfachste Abhängigkeitsinjektion.

Das Problem liegt im Wesentlichen oder ich muss die Details kennen.

Idee: Ebene für Ebene nach oben gehen, bis hin zur Eingabefunktion, die den Aufbau aller Objekte übernimmt. Eine Unterklasse, die erstellt und allen abhängigen Untermodulen bereitgestellt wird.

Problem: Die Eingabefunktion ist schwer zu pflegen. Daher ist ein Dependency-Injection-Framework erforderlich, um dies zu erreichen.

2. Angulars Abhängigkeitsinjektions-Framework

Ab Version 5 ist es aufgrund seiner langsamen Geschwindigkeit und der Einführung einer großen Codemenge veraltet und wurde in Injector.create geändert.

ReflectiveInjector : Wird zum Instanziieren von Objekten und zum Auflösen von Abhängigkeiten verwendet.

import { Component ,ReflectiveInjector } from "@angular/core";

Nach dem Login kopieren

resolveAndCreate empfängt ein Provider-Array und der Provider teilt dem Injektor mit, wie das Objekt erstellt werden soll.

constructor() {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance(&#39;idcard&#39;);
        }
      }
    ]);
  }

Nach dem Login kopieren

Injector: Injector entspricht der Hauptfunktion und kann alle Dinge im Abhängigkeitspool abrufen.

import { Component ,ReflectiveInjector, Inject} from "@angular/core";
import { OverlayContainer } from "@angular/cdk/overlay";
import { Identifiers } from "@angular/compiler";
import { stagger } from "@angular/animations";
import { environment } from &#39;src/environments/environment&#39;;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {

  constructor(private oc: OverlayContainer) {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance(&#39;idcard&#39;);
        }
      }
    ]);
    const person = injector.get(Person);
    console.log(JSON.stringify(person));
  }

}

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  provice:string;
  city:string;
  district:string;
  street:string;
  constructor(provice, city, district, street) {
    this.provice=provice;
    this.city=city;
    this.district=district;
    this.street=street;
  }
}

class Person {
  id: Id;
  address: Address;
  constructor(@Inject(Id) id, @Inject(Address )address) {
    this.id = id;
    this.address = address;
  }
}

Nach dem Login kopieren

Sie können die ausgedruckten Personeninformationen auf der Konsole sehen.

Abkürzung:

      // {
      //   provide: Person, useClass:Person
      // },
      Person, //简写为Person

Nach dem Login kopieren

Im Angular-Framework führt das Framework viele Dinge aus, und im Provider-Array registrierte Dinge werden automatisch im Pool registriert.

@NgModule({
  imports: [HttpClientModule, SharedModule, AppRoutingModule, BrowserAnimationsModule],
  declarations: [components],
  exports: [components, AppRoutingModule, BrowserAnimationsModule],
  providers:[
    {provide:&#39;BASE_CONFIG&#39;,useValue:&#39;http://localhost:3000&#39;}
  ]
})

Nach dem Login kopieren

  constructor( @Inject(&#39;BASE_CONFIG&#39;) config) {
    console.log(config);  //控制台打印出http://localhost:3000
  }

Nach dem Login kopieren

Angular ist standardmäßig ein Singleton, wenn Sie jedes Mal eine neue Instanz einfügen möchten. Es gibt zwei Möglichkeiten.

Zunächst geben Sie bei der Rückgabe eine Methode anstelle eines Objekts zurück.

{
        provide: Address, useFactory: ()=>{
          return ()=>{
            if(environment.production){
              return new Address("北京", "背景", "朝阳区", "xx街道xx号");
            }else{
              return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
            }
          }
        }
      },

Nach dem Login kopieren

Zweitens verwenden Sie den Vater-Sohn-Injektor.

constructor(private oc: OverlayContainer) {
    //接收一个provider数组
    const injector = ReflectiveInjector.resolveAndCreate([
      Person,
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝阳区", "xx街道xx号");
          }else{
            return new Address("西藏", "拉萨", "xx区", "xx街道xx号");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance(&#39;idcard&#39;);
        }
      }
    ]);

    const childInjector = injector.resolveAndCreateChild([Person]);

    const person = injector.get(Person);
    console.log(JSON.stringify(person));
    const personFromChild = childInjector.get(Person);
    console.log(person===personFromChild);  //false
  }

Nach dem Login kopieren

Wenn die Abhängigkeit im untergeordneten Injektor nicht gefunden wird, wird im übergeordneten Injektor danach gesucht. 3. Injector

! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die Abhängigkeitsinjektion in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!