如何从 service.ts 文件中的 Component.ts 文件调用 function，该文件在 angular 的同一组件中

Question

我尝试了外部共享服务的方法，但它不起作用

1）这是我的 UpdateBankComponent.ts 文件，我在其中使用 api-service.ts 文件调用名为 getSearchBank() 的帖子 api 但主要问题是我在此名为 getBankById() 的组件中有一个 function 获取更新的银行Id 并调用 get API 并在 html 页面上显示 get api 的响应。

export class UpdateBankComponent implements OnInit { 

constructor(private _newApiService : ApiServiceService , private http : HttpClient, public router: Router ,  private sharedser : SharedService ) {}

 getSearchBankAPI(postData : Create , postForm : NgForm ){
    this._newApiService.getSearchBank(
      postData.address,
       postData.bankId,
      postData.bankName,
      postData.branch,
      postData.ifscCode,
       postData.passBookNo
      
      )
     
   console.log("Search Customer API Called!!");
   postForm.reset();
  
  console.log("Bank IFSC")
  console.log(localStorage.getItem("bankIFSCvalue"))

   
  if (this.sharedser.clickEventSubscription==undefined) {    
    this.sharedser.clickEventSubscription = this.sharedser.    
    getClickEvent().subscribe(() => {
      console.log("Click Event subscription")
     this.getBankById();
     })
  }   
  
  }
  

 

     public  getBankById(){
     console.log( "Bank Id before get bank by Id :" + localStorage.getItem("BankId"))
  return this.http.get<Create[]>('http://localhost:9900/api/v1/bank/' + localStorage.getItem("BankId"))
  .subscribe((responseData : Create[])=>
  {
    const x = JSON.parse(JSON.stringify(responseData));
    let arr: any[] = [];  
    arr.push(x.body)   
     this.response = arr;
    console.log(this.response)
         });  

  } } 

2) 这是我的 api-service.ts，它在同一个组件中

export class ApiServiceService {
  specificBankId: void | undefined;

  constructor(private http : HttpClient ,  private sharedser : SharedService ) { }
  response : Create[] | undefined ; 
  bankifsc = localStorage.getItem("bankIFSCvalue")

  public getSearchBank(
   
    address: {
      addressDetails: string,
    city: string,
      country: string,
      pincode: string,
      state: string
    },
   
    bankId: string,
    bankName: string,
    branch: string,
    ifscCode: string,
     passBookNo : string
    ){
const postData : Create = {
  ifscCode: ifscCode,
  address: {
    addressDetails: '',
    city: '',
    country: '',
    pincode: '',
    state: ''
  },
  bankId: '',
  bankName: '',
  branch: '',
  passBookNo: ''
}
{
return this.http.post('http://localhost:9900/api/v1/bank/search',postData)
.subscribe((responseData)=>
{
  var response = JSON.parse(JSON.stringify(responseData));
  const specificbank = response.body.find((el: { ifscCode: string | null; }) => el.ifscCode === localStorage.getItem("bankIFSCvalue"));
    console.log("IFSC CODES ARE ===" + specificbank.ifscCode + " " + localStorage.getItem("bankIFSCvalue"))
     if (specificbank) {
        this.specificBankId =  localStorage.setItem("BankId", specificbank.bankId);
        this.callMe()
      //  localStorage.setItem("customerId", (response.body.customerId));
     }
  console.log("Search Bank called from Update bank Component!!")
  console.log(responseData);
  console.log("Bank ifsc code entered is !!")
   console.log(localStorage.getItem("bankIFSCvalue"))

  console.log("Specific Bank id is ")
  console.log(localStorage.getItem("BankId"))
  
  
  });  
    }
  }

  callMe(){
    this.specificBankId
    console.log("Click Event sent!!")
    this.sharedser.sendClickEvent();
  }

现在的主要问题是，在我调用 api 的这个 getSearchBank() 中，在这里

this.specificBankId = localStorage.setItem("BankId", specificbank.bankId);

我正在存储更新后的 bankId，所以我想要在更新 bankId 后调用 Component.ts 文件中的 function getBankById()

我想在这里调用这个 getBankById() function

 if (specificbank) {
        this.specificBankId =  localStorage.setItem("BankId", specificbank.bankId);
        this.getBankById()
      
     }

所以我该怎么做，我已经尝试过共享服务方法，但我也没有工作这是共享服务代码

export class SharedService {
  // private subject = new Subject<any>();
   private subject = new BehaviorSubject<any>(null);
   clickEventSubscription : Subscription | undefined;
  

    sendClickEvent(){
      this.subject.next;
    }

    getClickEvent():Observable<any>{
      return this.subject.asObservable();
    }

  

}

** 这也是我的 html 代码，用于显示 getBankById() 数据，我想显示详细信息，这就是为什么我必须在 .ts 组件本身中声明此 function 的原因，否则我会立即在 service.ts 中声明它文件**

  <form #postForm="ngForm"   (ngSubmit)="getSearchBankAPI(postForm.value , postForm)" >
                      
                        <div class="form-row">
                            <div class="name">IFSCCode</div>
                            <div class="value">
                                <div class="input-group">
                                    <input class="input--style-5" type="text" name="ifscCode" (input)="onKey($event)">
                                   
                                </div>
                            </div>
                        </div>

                        <table class="table" border="1">
                            <thead>
                            <tr>
                              <th scope="col">Bank Name</th>
                              <th scope="col">Branch</th>
                              <th scope="col">IFSCCode</th>
                            </tr>
                            <tr *ngFor="let el of response">
                                <th scope="col">{{el.bankName}}</th>
                                <th scope="col">{{el.branch}}</th>
                                <th scope="col">{{el.ifscCode}}</th>
                            </tr>
                            
                            </thead>
                        
                          </table>
                     
                        <div>
                            <button class="btn btn--radius-2 btn--red" type="submit" required >See Bank Details</button> | 
                           
                        </div>
                      
                    </form>

Answer 1

将getBankById()移到ApiServiceService中。 然后从UpdateBankComponent调用它只需使用this._newApiService.getBankById()

您可以轻松地从组件调用服务 function，但不能轻松地从服务调用组件 function，您也不应该. 因此，如果两个文件都需要 function，它应该在服务中。