如何在angular中从一个组件调用该方法到其他组件(单个组件)

Question

我有一个angular应用程序n，我需要根据在搜索字段中输入的值显示数据。

我能够在一个组件路径中显示数据是(components/platform/annotation-my-task/annotation-pm-admin-list)

pm-admin-list.component.ts

searchDetails(){
//here called the api and fetched the data
}

pm-admin-list.component.html

<div>
<input placeolder ="search here" [(ngModel)] ="search" (keyup.enter)="searchDetails()">
<img src="assets/imgs/search-icon">
</div>
<ul *ngFor ="let data of items">
<li>{{data.name}}</l>
<li>{data.status}}</li>
<li>{{data.lang}}</li>
</ul>

所以从上面的代码中，当我们输入一些数据进行搜索时，输入后它工作良好，并显示数据，如上面的列表项

但是我需要在其他组件中显示同样的东西，路径是(components/platform/annotation/annotation-process-list)

两者不相关

我的要求是我需要显示相同的数据在第一个组件(pm-admin-list.component.ts)在另一个组件(annotation-process-list)

我是一个很新的角度，谁能帮助我在相同的

Answer 1

你必须做

ng g s search

会生成一个search.service.ts文件，类似于

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SearchService {

constructor() { }
//define the common function here
searchDetails(){
//here called the api and fetch the data
}
}

那么在相应的组件构造函数中，你必须初始化服务并使用服务进行函数调用，在你的例子中是pm-admin-list.component.ts

constructor(private dataService: SearchService)
searchDetails(){
SearchService.searchDetails()
}

这意味着该服务是一个公共特性，可以在任何组件中调用，并且可以多次使用。我不知道searchDetail函数的逻辑，所以我假设(基于命名)它返回一些值，可以在本地组件中使用