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

Question

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

1(这是我的UpdateBankComponent.ts文件，我正在使用api-service.ts文件调用名为getSearchBank((的post-api。但主要的问题是，我在这个组件中有一个名为getBankById((的函数，它获取更新的银行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();
}

现在主要的问题是，在这个getSearchBank((中，我正在调用post-api，在中

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

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

我想在这里调用这个getBankById((函数

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

}

**此外，这是我用于显示getBankById((数据的html代码，我想显示详细信息，这就是为什么我必须在.ts组件本身中声明此函数，否则我会直接在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()

您可以很容易地从组件调用服务函数，但不能很容易地通过服务调用组件函数，也不应该。因此，如果两个文件都需要该函数，那么它应该在服务中。