服务中的Angular 4数据,传递给组件

发布时间：2020-12-17 17:36:28 所属栏目：安全来源：网络整理

导读：在服务中有一些数据,并且当我在服务中的对象中有数据时工作正常,但现在我已连接数据库连接,数据永远不会进入组件. 我希望服务订阅从数据库返回的数据,并定义了这样的调用： public setPerson(ac: string): void{ console.log(ac); this.generatePerson(ac).s

在服务中有一些数据,并且当我在服务中的对象中有数据时工作正常,但现在我已连接数据库连接,数据永远不会进入组件.

我希望服务订阅从数据库返回的数据,并定义了这样的调用：

public setPerson(ac: string): void{
    console.log(ac);
    this.generatePerson(ac).subscribe((data) => {
        // this.mapPersonFromInput(data[0]);
        console.dir(data);
    });

  }

mapPersonFrominput()函数是模拟数据的保留.它与下面的extractData基本相同,但是来自代码中的静态对象.

generatePerson看起来像这样：

public generatePerson(id: string):Observable<Person>{
    var datRetUrl: string = '/api/'
    var fullUrl: string = datRetUrl + id;
    return this.http.get(fullUrl)
                .map(this.extractData)
                .catch(this.handleError);
  }

extractData只是将输入对象的值分配给服务的对象结构,而handleerror只是将错误记录到控制台.

我通过从导航组件调用此函数来调用服务以在组件加载之前从组件初始化数据对象：

passCodeToService():void{
    this.psn.setPerson(this.accessCode);
    this.route.navigate(['/name']);
  }

在应该获取数据的实际组件中,我正在使用ngOnInit,但我认为我应该使用ngOnChanges来初始化组件.这是我目前正在使用的代码,但还没有运气修复.

ngOnInit() {
  this.name =this.psn.getName();
  console.log(this.name);
}

getName()只返回我在服务中存储的对象.

public getName(): Name{
    return this.servicePerson.name;
  }

解决方法

你不应该在这里使用ngOnChanges,它不适合你想要做的事情.

根据你的问题,这是你想要实现的目标：

>从DB获取数据
>您的组件应该能够异步获取一部分数据

您可以使用您拥有的代码实现此目的.您需要做的就是添加更多代码并利用RxJS.进一步来说：

>在您的个人服务中创建一个人主题
>当数据从您的数据库返回时,请执行personSubject.next(dataFromDB)以添加到人员流.
>创建一个将人物作为可观察对象返回的函数,然后您可以从组件中订阅该observable

使用这种方法,每次数据来自您的数据库时,该数据将被添加到人员流中,订阅该流(您的组件)的任何内容都将获取数据.

快速示例(因为我没有完整的代码)：

import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class PersonService {
    // The person subject
    personStream: ReplaySubject<Person> = new ReplaySubject();

    // The person observable
    person$(): Observable<Person> {
        return this.personStream.asObservable();
    }

    // Get person from DB and add to stream
    getDataFromDB() {
        this.http.get(url).subscribe(response => {
            this.personStream.next(response.person);
        });
    }
}

@Component({...})
export class MyComponent implements OnInit {
    person: Person;

    constructor(private personService: PersonService) {}

    ngOnInit() {
        // Subscribe to person observable. Any time person data changes,this will be called.
        this.personService.person$().subscribe(person => this.person = person);

        // If you return the `this.http.get(url)` from `getDataFromDB`,you can just do this instead...
        this.personService.getDataFromDB().subscribe(person => this.person = person);
    }
}

但这实在是太过分了,因为实际上你需要做的只是订阅组件中的getDataFromDB函数,因为它本身可以返回一个可观察的Person类型.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!