Angular: 如何将字符串发送到注入服务?
Angular: How to send a string to an injection service?
我为 crud 任务创建了通用服务,该服务通过 DI(依赖注入)使用 HttpClient,但我需要在服务的构造函数中通知另一个值,如何实现?
因为当我在 class 的构造函数中定义将使用 DI 使用 CRUD 服务时,无法将参数传递给构造函数
下面是服务
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { CrudInterface } from "@app/core/crud.interface";
import { environment } from "@env/environment";
import { Observable } from "rxjs/Observable";
@Injectable()
export class CRUD<T> implements CrudInterface<T>{
endpoint: string;
constructor(private http: HttpClient, routeDir: string){
this.endpoint = `${environment.endpoint}/${routeDir}`;
}
getAll(): Observable<T[]> {
return this.http.get<T[]>(`${this.endpoint}`);
}
get(id: number): Observable<T> {
return this.http.get<T>(`${this.endpoint}/${id}`);
}
create(object: T): Observable<T> {
return this.http.post<T>(`${this.endpoint}`, object);
}
update(object: T): Observable<T> {
return this.http.put<T>(`${this.endpoint}`, object);
}
delete(id: number): Observable<any> {
return this.http.delete<T>(`${this.endpoint}/${id}`);
}
}
import { Usuario } from "@app/usuarios/model/usuario";
import { CRUD } from "@app/core/crud.service";
class TestCrudServide {
constructor(
/**
* How to inform the parameter here?
* in this case the endpoint (2nd parameter of the CRUD service)
*/
private crudService: CRUD<Usuario>
){ }
getAll(){
this.crudService.getAll();
}
}
更新
利用 Sannon Aragão(感谢)工厂概念提出的解决方案,我创建了用于动态创建实例的服务提供者
https://angular.io/guide/dependency-injection#factory-providers
export class crudServiceProvider {
static getProvider(routeDir: string) {
return {
provide: CRUD,
deps: [HttpClient],
useFactory: (dep) => {
return new CRUD(dep, routeDir);
}
}
}
}
在我的组件中
@Component({
selector: 'app-revenda',
templateUrl: './revenda.component.html',
styleUrls: ['./revenda.component.css'],
providers:[ crudServiceProvider.getProvider('/api/revenda') ]
})
export class RevendaComponent implements OnInit {
constructor(
private crudService: CRUD<Revenda>
) { }
ngOnInit() {
// now it's work with the correct path and type!
this.crudService.get(1).subscribe(item => console.log(item));
}
}
您不能在构造函数中实现任何内容。你必须注入 httpservice 对象(crudservice)并且你必须将参数传递给函数。
要实现第二个你必须做这样的事情
this.crudService.get(10);
我不相信你可以用依赖注入的工作原理做到这一点。您可以做的是创建一个基础 CRUD class
export class CRUD<T> implements CrudInterface<T>{
endpoint: string;
constructor(private http: HttpClient, routeDir: string){
this.endpoint = `${environment.endpoint}/${routeDir}`;
}
getAll(): Observable<T[]> {
return this.http.get<T[]>(`${this.endpoint}`);
}
get(id: number): Observable<T> {
return this.http.get<T>(`${this.endpoint}/${id}`);
}
create(object: T): Observable<T> {
return this.http.post<T>(`${this.endpoint}`, object);
}
update(object: T): Observable<T> {
return this.http.put<T>(`${this.endpoint}`, object);
}
delete(id: number): Observable<any> {
return this.http.delete<T>(`${this.endpoint}/${id}`);
}
}
然后制作一个可扩展 CRUD 的可注入服务class
@Injectable()
export class UserService extends CRUD<Usario> {
constructor(http: HttpClient){
super(http, 'users');
}
}
UserService
是您在 AppModule 中提供并注入到您的组件中的 class。可以看到super被用来传入routeDir
参数。这是一个 stack blitz 演示。
Filipe,来自您想要提供服务的模块:
{
provide: 'userService1',
deps: [ HttpClient ],
useFactory: (dep1 ) => {
return new UserService( dep1, 'test');
}
}
在您将使用该服务的组件中:
constructor( @Inject('userService1') private userService: UserService ) { }
在 CRUD API 中,您获得的参数为字符串:
constructor( private http: HttpClient, private s: string) {
console.log(s); // will print 'test'
}
我为 crud 任务创建了通用服务,该服务通过 DI(依赖注入)使用 HttpClient,但我需要在服务的构造函数中通知另一个值,如何实现?
因为当我在 class 的构造函数中定义将使用 DI 使用 CRUD 服务时,无法将参数传递给构造函数
下面是服务
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { CrudInterface } from "@app/core/crud.interface";
import { environment } from "@env/environment";
import { Observable } from "rxjs/Observable";
@Injectable()
export class CRUD<T> implements CrudInterface<T>{
endpoint: string;
constructor(private http: HttpClient, routeDir: string){
this.endpoint = `${environment.endpoint}/${routeDir}`;
}
getAll(): Observable<T[]> {
return this.http.get<T[]>(`${this.endpoint}`);
}
get(id: number): Observable<T> {
return this.http.get<T>(`${this.endpoint}/${id}`);
}
create(object: T): Observable<T> {
return this.http.post<T>(`${this.endpoint}`, object);
}
update(object: T): Observable<T> {
return this.http.put<T>(`${this.endpoint}`, object);
}
delete(id: number): Observable<any> {
return this.http.delete<T>(`${this.endpoint}/${id}`);
}
}
import { Usuario } from "@app/usuarios/model/usuario";
import { CRUD } from "@app/core/crud.service";
class TestCrudServide {
constructor(
/**
* How to inform the parameter here?
* in this case the endpoint (2nd parameter of the CRUD service)
*/
private crudService: CRUD<Usuario>
){ }
getAll(){
this.crudService.getAll();
}
}
更新
利用 Sannon Aragão(感谢)工厂概念提出的解决方案,我创建了用于动态创建实例的服务提供者
https://angular.io/guide/dependency-injection#factory-providers
export class crudServiceProvider {
static getProvider(routeDir: string) {
return {
provide: CRUD,
deps: [HttpClient],
useFactory: (dep) => {
return new CRUD(dep, routeDir);
}
}
}
}
在我的组件中
@Component({
selector: 'app-revenda',
templateUrl: './revenda.component.html',
styleUrls: ['./revenda.component.css'],
providers:[ crudServiceProvider.getProvider('/api/revenda') ]
})
export class RevendaComponent implements OnInit {
constructor(
private crudService: CRUD<Revenda>
) { }
ngOnInit() {
// now it's work with the correct path and type!
this.crudService.get(1).subscribe(item => console.log(item));
}
}
您不能在构造函数中实现任何内容。你必须注入 httpservice 对象(crudservice)并且你必须将参数传递给函数。
要实现第二个你必须做这样的事情
this.crudService.get(10);
我不相信你可以用依赖注入的工作原理做到这一点。您可以做的是创建一个基础 CRUD class
export class CRUD<T> implements CrudInterface<T>{
endpoint: string;
constructor(private http: HttpClient, routeDir: string){
this.endpoint = `${environment.endpoint}/${routeDir}`;
}
getAll(): Observable<T[]> {
return this.http.get<T[]>(`${this.endpoint}`);
}
get(id: number): Observable<T> {
return this.http.get<T>(`${this.endpoint}/${id}`);
}
create(object: T): Observable<T> {
return this.http.post<T>(`${this.endpoint}`, object);
}
update(object: T): Observable<T> {
return this.http.put<T>(`${this.endpoint}`, object);
}
delete(id: number): Observable<any> {
return this.http.delete<T>(`${this.endpoint}/${id}`);
}
}
然后制作一个可扩展 CRUD 的可注入服务class
@Injectable()
export class UserService extends CRUD<Usario> {
constructor(http: HttpClient){
super(http, 'users');
}
}
UserService
是您在 AppModule 中提供并注入到您的组件中的 class。可以看到super被用来传入routeDir
参数。这是一个 stack blitz 演示。
Filipe,来自您想要提供服务的模块:
{
provide: 'userService1',
deps: [ HttpClient ],
useFactory: (dep1 ) => {
return new UserService( dep1, 'test');
}
}
在您将使用该服务的组件中:
constructor( @Inject('userService1') private userService: UserService ) { }
在 CRUD API 中,您获得的参数为字符串:
constructor( private http: HttpClient, private s: string) {
console.log(s); // will print 'test'
}