ANGULAR — передать переменную из компонента в сервис
Я изучал взаимодействие компонентов и передачу значений от одного компонента к службе, но не нашел ничего достаточно ясного.
Предпосылка проста: у меня есть переменная/значение, которое поступает из API, и мне нужно, чтобы эта переменная была передана компоненту службы (который содержит запрос GET и URL-адрес, где мне нужно значение).
Я думал об использовании EventEmitter для создания моей переменной, но тогда у службы нет HTML для подписки на нее.
Вот несколько фрагментов кода:
app.component.ts
private data: any[] = [];
ngOnInit(): void {
this.apiService.getData().subscribe(response => {
this.data = response.data;
console.info(this.data.id);
});
}
API.service.ts
@Injectable({
providedIn: 'root',
})
export class PromptApiService {
private readonly apiUrl = 'MY_API_URL;
/*I need the id variable from component to access here*/
constructor(
private http: HttpClient,
) {}
getData(): Observable<> {
return this.http.get<>(
`${this.apiUrl}/mydata`,
);
}
}
Мне пришлось удалить часть кода из соображений конфиденциальности, так как это рабочий проект, поэтому прошу прощения, если кода мало.
Как лучше всего передать переменную от компонента к сервису? Любые предложения будут ценны.
Я думаю, что это как бы отвечает на мой вопрос, но, как и в предыдущем решении, переменная, которую я установил в файле service.ts, получает ошибку IDE, которую она объявила, но никогда не читала.
Это не ошибка, это предупреждающее сообщение, также вам нужно присвоить переменную самому методу.
Ответы 2
Такие вещи могут быть немного сложными, когда вы начинаете.
Чтобы передать переменную из компонента в службу, у вас есть простое решение:
- Внутри сервиса
api.service.tsвы можете создать переменную вверху и сеттер:
@Injectable({
providedIn: 'root',
})
export class PromptApiService {
private myVariable:string; // THIS LINE
private readonly apiUrl = 'MY_API_URL';
constructor(
private http: HttpClient,
) {}
setMyVariable(myVariable:string):void { // THIS FUNCTION
this.myVariable=myVariable;
}
getData(): Observable<> {
...
}
}
- Внутри
app.component.tsвы создаете экземпляр сервиса в конструкторе и используете сеттер:
constructor( private apiSvc: PromptApiService ) {} // THIS LINE
ngOnInit(): void {
this.apiSvc.setMyVariable("HELLO"); // THIS LINE
}
Это выглядит довольно прямолинейно, однако я получаю сообщение об ошибке в IDE, что переменная объявлена, но никогда не читается - в файле service.ts
Вы можете просто переместить свою переменную data в свой сервис, а затем использовать ее в своих компонентах, сделав свой сервис public
api.service.ts
@Injectable({
providedIn: 'root',
})
export class PromptApiService {
private readonly apiUrl = 'MY_API_URL';
public data: any[] = [];
constructor(private http: HttpClient) {}
getData(): Observable<> {
return this.http.get<>(`${this.apiUrl}/mydata`);
}
}
app.component.ts
export class AppComponent {
constructor(public promptApiService: PromptApiService)
ngOnInit(): void {
this.promptApiService.getData().subscribe(response => {
this.promptApiService.data = response.data;
});
}
}
app.component.html
<div *ngIf = "promptApiService.data">
<p>{{ promptApiService.data.id }}</p>
</div>
Примечание. Это предполагает, что вы используете метод обнаружения изменений по умолчанию, а не OnPush
Отвечает ли это на ваш вопрос? Угловая передача переменной из компонента в сервис