如何编写触发/刷新HTTP POST方法的函数？

Question

如何在遥远的组件中编写一种方法，当示例性时，我单击一个按钮，此帖子方法订阅将再次运行？我认为，通过服务我应该到达这里...它（this.qwe）不应该在构造函数中仅仅是一个eaxample ...

  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

如果您只是想提出一些帖子请求，请参阅第一部分，如果您实际需要调用其他组件的方法，请参阅第二部分。

---

恐怕您可能只是为了提出发布请求而制作整个组件 - 这不是必需的。您可以为此提供服务。

@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);
    });
  }
}

---

然后，如果您希望其他组件调用此组件的方法，则 您可以为此组件创建服务。您可以将主题放在其中，该组件可以订阅，其他组件可以调用next（） on。

@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();
  }
}