Question

在一个组件中，我有一个带有两个函数的微调器：showSpinner()和stopSpinner()。当我在组件中调用postToken()时，这将调用服务的postToken()功能。在服务的postToken()函数中，我想从组件中调用函数showSpinner()以在视图中显示微调器（并且还停止微调器）。

我的代码目前很乱，因为我试图从Google / StackOverflow应用不同类型的解决方案，所以请耐心等待：P。

component.ts

export class AuthenticatetokenComponent implements OnInit {

  constructor(private authService: AuthService,private spinner: NgxSpinnerService) {}

  public showSpinner() {
    this.spinner.show();
  }

  public stopSpinner() {
    this.spinner.hide();
  }

  private postToken() {
    this.authService.postToken(this.token);
  }
}

service.ts

@Injectable()
export class AuthService {

  private BASE_URL: string = "http://localhost:8080";

  constructor(private authenticateToken: AuthenticatetokenComponent, private _router: Router, private _dataservice: DataService) { }

  postToken(token: string) : void {
    this.authenticateToken.showSpinner();

    if(this.authenticateToken.token == '') {
      this.authenticateToken.stopSpinner();
      this.authenticateToken.openModal("Tokenveld is leeg! Voer aub een token in!");
    }

    this.authenticateToken.httpClient.post('/authentication', {
        token: token
     }
    ).subscribe(
      (data: any) => {
        if (token === '') {
          this.authenticateToken.stopSpinner();
          console.log('Khiem hier error in duwen');
          throw new Error('This token is not valid');
        } else {
          this.authenticateToken.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'white';
            this._dataservice.electionFromService = data;
            this._dataservice.tokenFromService = token;
            this.authenticateToken.stopSpinner();
            this._router.navigateByUrl('/voting-page');
        }
      }
    );
  }
  getRestCall() : void {
    this.authenticateToken.httpClient.get('http://localhost:8080/test')
      .subscribe(
        (data: any[]) => {
          this.authenticateToken.data = data;
          console.log(data);
        }
      );
  }

}

Answer 1

这可能不是您期望的答案，但我不确定我是否理解您AuthService的目的。目前，它的代码几乎只使用组件的属性和方法，这意味着它应该是组件的一部分。换句话说，您应该可以省去服务类。

但是，如果您100％确定需要服务，我建议您尽量避免将组件作为依赖项注入您的服务，因为这意味着你正在处理循环依赖 - 这种依赖迟早会以某种方式导致你陷入地狱。（此外，服务意味着独立于使用它们的组件。这就是提供服务的重点。）

无论如何，为了避免这种循环依赖，即解开组件和服务并让服务不知道你的组件，我建议如下：

让组件将回调传递给服务，该服务包含服务完成后要采取的所有特定于组件的操作，即服务。然后，服务可以在时机成熟时调用此回调。
让服务的方法返回HTTPClient库返回的observable，以便组件也可以订阅它，并在HTTP请求终止时执行自定义代码。

在这两种情况下，您都需要将HTTPClient作为依赖项注入服务而不是组件。

如何从服务中调用组件的功能？

1 个答案: