Что эквивалентно фабрике в Angular2?
Поэтому я привык использовать фабрики и услуги в Angular.
Я читаю документы Angular2 и не вижу никакого аналога фабрики. Что эквивалентно для Angular2?
Ответы на вопрос(4)
вам нужно предоставить его в этом компоненте следующим образом:
@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
Это создаст новый экземплярHereService как фабрика делает.
какие заводы делают именно в Angular1, но в Angular2 естьuseFactory:
{
provide: SomeClass,
useFactory: (dep1, dep2) => (x) => new SomeClassImpl(x, dep1, dep2),
deps: [Dep1, Dep2]
}
предоставить собственную логику построения экземпляра, если значение по умолчанию не соответствует вашим потребностям.
Вы также можете внедрить фабрику для создания новых экземпляров самостоятельно:
/* 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);
}
Аргумент x должен иметь присваивание типа, иначе angular не знает, как с ним обращаться.
class SomeClassImpl {
constructor(x: number, dep1: Dep1, dep2: Dep2){}
}
(x) =>, Намерение заключалось в том, чтобы ввести фабричную функцию, а не результат фабричной функции.let newSomeClass = someClassFactory(1); (посередине надрезано) - в CTOR,someClassFactory: any уже (!) вызван, возвращен ужеnew SomeClassImpl, Так почему вы вызываете его снова вlet newSomeClass = someClassFactory(1); ? Я что-то пропустил ?и в дополнение к этому есть несколько моментов, на которые следует обратить внимание.
Для заводов, сервисов и т. Д. В Angular2 у нас естьслужба (или общая служба), мы должны сделать наш сервисInjectable для того, чтобы использовать его.
ПРИМЕЧАНИЕ. Этот код относится к бета-версии, а не к 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;
}
}
Если я хочу использовать везде в моем приложении, то я должен внедрить этот сервис в функцию начальной загрузки, как это,
bootstrap(App, [HTTP_PROVIDERS,sharedService <--------Name Injection
ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);
Таким образом, он создает один экземпляр вашего сервиса. Если вы не хотите использовать один экземпляр, вы можете использоватьProviders:[sharedService] метаданные в вас@component декоратор.
Затем используйте его в одном из таких компонентов, как этот,
export class TheContent {
constructor(private ss: sharedService) { <--------Injection dependency of your newly created service
console.log("content started");
}
showhide() {
this.ss.change(); <----- usage
}
}
bind(...).toXxx(...) устарел синтаксис. Используйте вместоprovide(..., {useXxx: ...})сервисы, константы и ценности исчезли в Angular2. Angular2 в корне и принципиально отличается от классического Angular. В Angular2 основные понятия
компонентывнедрение зависимостипереплетИдея сервисов, фабрик, провайдеров и констант была подвергнута критике в Angular 1. Было сложно выбирать между ними. Удаление их немного упрощает вещи.
В оригинальном Angular, вы бы определили сервис как
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 существенно использует синтаксис ES6, чтобы сделать код более читабельным и более легким для понимания.
Одно новое ключевое слово в ES6class, который можно рассматривать как услугу.
Классы ES6 - простой сахар по сравнению с основанным на прототипе шаблоном ОО. Наличие единой удобной декларативной формы облегчает использование шаблонов классов и способствует взаимодействию. Классы поддерживают наследование на основе прототипов, супер вызовы, экземпляры и статические методы и конструкторы.
Вот как этот код может выглядеть в Angular2
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;
})
}
}