我怎么写触发/刷新http post方法编程函数?

Question

我怎么能写一个方法在很远很远的组件，当例如我点击一个按钮，这个帖子方法订阅将再次运行?它(this.qwe)不必在构造函数中，它只是一个示例…

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'post-request',
templateUrl: 'post-request.component.html',
})
export class PostRequestComponent {
postId;
constructor(private http: HttpClient) {
this.qwe()
}

qwe() {
this.http
.post<any>('https://reqres.in/api/posts', {
title: 'Angular POST Request Example',
})
.subscribe((data) => {
this.postId = data.id;
});
}
}

Answer 1

如果你只是想发出一些post请求，请参阅第一部分，如果你真的需要调用另一个组件的方法，请参阅第二部分。

---

我担心你可能会制作一个完整的组件只是为了发出post请求-这是不必要的。你可以为此创建一个服务。

@Injectable({
providedIn: 'root',
})
export class MyService {
constructor(private http: HttpClient) {}
post(): Observable<any> {
return this.http.post<any>('https://reqres.in/api/posts', {
title: 'Angular POST Request Example',
});
}
}

然后在任何组件中发出请求

export class SomeComponent {
constructor(private myService: MyService) {}
qwe() {
this.myService.post().subscribe((data) => {
console.log(data);
});
}
}

---

如果你想让其他组件调用这个组件的方法，你可以为这个组件创建一个服务。您可以在它里面放一个Subject，这个组件可以订阅它，其他组件可以调用next()。

@Injectable({
providedIn: 'root',
})
export class PostRequestService {
qweSubject = new Subject<void>();
}

在这个组件中，我们可以订阅主题，这样我们就知道其他组件何时想要调用该方法。确保在组件被销毁时取消订阅，以防止内存泄漏——这是必要的，因为服务永远不会被销毁，所以主体不会清理自己的订阅。

export class PostRequestComponent implements OnInit, OnDestroy {
postId: any;
qweSub = new Subscription();
constructor(
private http: HttpClient,
private prService: PostRequestService
) {}
ngOnInit(): void {
this.qweSub = this.prService.qweSubject.subscribe(() => this.qwe());
}
qwe() { ... }
ngOnDestroy() {
this.qweSub.unsubscribe();
}
}

在其他组件中，当我们需要调用该方法时，我们注入该服务并调用next()。

export class SomeComponent {
constructor(private prService: PostRequestService) {}
qwe() {
this.prService.qweSubject.next();
}
}