web-dev-qa-db-de.com

Was ist das Äquivalent einer Fabrik in Angular2?

Daher bin ich es gewohnt, Fabriken und Dienstleistungen in Angular zu verwenden.

Ich lese durch die Angular2-Dokumente und sehe keine Entsprechung einer Fabrik. Was ist das Äquivalent für Angular2?

11
user2202911

Fabriken, Dienstleistungen, Konstanten und Werte sind alle in Angular2 verschwunden. Angular2 unterscheidet sich grundlegend vom klassischen Angular. In Angular2 sind die Kernkonzepte

  • komponenten
  • abhängigkeitsspritze
  • bindung

Die Idee von Dienstleistungen, Fabriken, Anbietern und Konstanten wurde in Angular 1 kritisiert. Es war schwierig, zwischen einer zu wählen. Das Entfernen vereinfacht die Sache ein bisschen.

Im ursprünglichen Angular würden Sie einen Dienst so definieren

app.service('BookService', ['$http', '$q', BookService]);
function BookService($http, $q){
  var self = this;
  var cachedBooks;
  self.getBooks = function(){
    if (cachedBooks) {
      return $q.when(cachedBooks);
    }
    return $http.get('/books').then(function(response){
      cachedBooks = response.data.books;
      return cachedBooks;
    })
  }
}

Angular2 nutzt die ES6-Syntax erheblich, um den Code lesbarer und verständlicher zu machen.

Ein neues Schlüsselwort in ES6 ist class, das als Dienst betrachtet werden kann.

ES6-Klassen sind ein einfacher Zucker über dem auf Prototypen basierenden OO -Muster. Die Verwendung eines einzigen deklarativen Formulars erleichtert die Verwendung von Klassenmustern und fördert die Interoperabilität. Klassen unterstützen prototypbasierte Vererbung, Super-Aufrufe, Instanz- und statische Methoden und Konstruktoren.

So sieht derselbe Code in Angular2 aus

import {HttpService, Promise}  from '../Angular/Angular2';
export class BookService{
    $http, $q, cachedBooks;
    constructor($http: HttpService, $q: Promise) {
        this.$http = $http;
        this.$q = $q
    }
    getBooks() {
    if (this.cachedBooks) {
        return this.$q.when(this.cachedBooks);
    }
    return this.$http.get('/books').then(function(data) {
        this.cachedBooks = data.books;
        return this.cachedBooks;
    })
  }
}
14

Die Antwort von @Richard Hamilton wird geschätzt und zusätzlich gibt es einige Punkte zu beachten.

Für Fabriken, Service usw. in Angular2 haben wir service (oder shared service). Wir müssen unseren Dienst Injectable machen, um ihn nutzen zu können.

HINWEIS: Dieser Code gehört zur Betaversion und nicht zu RC.

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Router} from 'angular2/router';
import {Http} from 'angular2/http';

export interface ImyInterface {
   show:boolean;
}

@Injectable()      <---------------------------- Very Important
export class sharedService {  <----------------- Service Name
  showhide:ImyInterface={show:true};

  constructor(http:Http;router:Router)
  {
    this.http=http;
  }     
  change(){
        this.showhide.show=!this.showhide.show;
  }
} 

Wenn ich überall in meiner App verwenden möchte, muss ich diesen Dienst in die Bootstrap-Funktion wie folgt einfügen:

bootstrap(App, [HTTP_PROVIDERS,sharedService    <--------Name Injection
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

Auf diese Weise wird eine einzelne Instanz Ihres Dienstes erstellt. Wenn Sie nicht mit einer einzelnen Instanz arbeiten möchten, können Sie Folgendes tun: Sie können Providers:[sharedService]-Metadaten in Ihrem @component-Dekorator verwenden.

Dann verwenden Sie es in einer der folgenden Komponenten:

export class TheContent {
  constructor(private ss: sharedService) {  <--------Injection dependency of your newly created service
    console.log("content started");
  }
  showhide() {
    this.ss.change();  <----- usage
  }
}

Arbeitsbeispiel hier überprüfen

14
micronyks

Ich weiß nicht, was Fabriken in Angular1 genau tun, aber in Angular2 gibt es useFactory:

{ 
  provide: SomeClass, 
  useFactory: (dep1, dep2) => (x) => new SomeClassImpl(x, dep1, dep2),
  deps: [Dep1, Dep2]
}

um eine eigene Instanzkonstruktionslogik bereitzustellen, wenn der Standardwert nicht Ihren Anforderungen entspricht.

Sie können auch eine Factory injizieren, um selbst neue Instanzen zu erstellen:

/* deprecated or removed depending on the Angular version you are using */
provide(SomeClass, {
    useFactory: (dep1, dep2) => {
        (x) => new SomeClassImpl(x, dep1, dep2), 
    },
    deps: [Dep1, Dep2]
})
constructor(@Inject(SomeClass) someClassFactory: any) {
  let newSomeClass = someClassFactory(1);
}

Argument x muss Typzuordnung haben, andernfalls kann winkle nicht damit umgehen.

class SomeClassImpl {
  constructor(x: number, dep1: Dep1, dep2: Dep2){}
}
7

Wenn Sie eine neue Instanz eines Services in einer Komponente benötigen, müssen Sie sie in dieser Komponente wie folgt bereitstellen:

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

Dies erzeugt eine neue Instanz der HereService wie eine Factory.

1
Damsorian