如何从组件初始化服务?

Question

我在每个组件中使用单独的服务实例：

@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss'],
providers: [PaginationService],
})

服务分页为：

@Injectable()
export class PaginationService {
private offset: number;
private limit: number;
constructor() {
this.offset = 0;
this.limit = 20;
}
}

如您所见，服务在构造函数中具有初始化。 如何从特定组件初始化服务，例如：

providers: [PaginationService(0, 20)],

Answer 1

可以使用工厂提供程序，如下所示：

@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss'],
providers: [
{
provide: PaginationService,
useFactory: () => new PaginationService(0, 20)
}
],
})

您可以在 Angular 文档中找到更多示例 此处.

Answer 2

您可以为它们创建InjectionToken。

注入.令牌.ts

import { InjectionToken } from "@angular/core";
export const PAGINATION_OFFSET = new InjectionToken<string>('PaginationOffset');
export const PAGINATION_LIMIT = new InjectionToken<string>('PaginationLimit');

组件.ts

import {PAGINATION_OFFSET, PAGINATION_LIMIT} from "<injection.tokens>"
@Component({
selector: 'stackoverflow',
template: ``,
styles: [`h1 { font-family: Lato; }`],
providers: [
PaginationService,
{
provide: PAGINATION_OFFSET,
useValue: 10
},
{
provide: PAGINATION_LIMIT,
useValue: 50
}
]
})

分页服务

import {PAGINATION_OFFSET, PAGINATION_LIMIT} from "./injection-tokens";

@Injectable()
export class PaginationService {
constructor(@Inject(PAGINATION_OFFSET) private offset: number, @Inject(PAGINATION_LIMIT) private limit: number ) {}
}

您可以检查工作堆栈闪电战

Answer 3

一种方法是正常注入服务，然后在组件的构造函数中，您可以在服务上调用一个方法，该方法使用提供的值执行设置，类似于：

@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {
constructor(private paginationService: PaginationService) {
this.paginationService.setup(0, 20);
}
ngOnInit() { }
}