Angular 使用中的角度4数据，传递到组件

在一个服务中有一些数据，当我在服务上的一个对象中有数据时，它工作得很好，但是现在我已经连接了一个数据库连接，数据永远不会到达组件

我希望服务订阅从数据库返回的数据，并定义如下调用：

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

  }

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

mapPersonFrominput（）

函数是模拟数据的保留。它本质上与下面的extractData相同，但来自代码中的静态对象

generatePerson看起来像这样：

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

  }

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

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

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

getName（）

只返回我存储在服务中的对象

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

---

您不应在此处使用

ngOnChanges

，它不适用于您正在尝试的操作

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

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

您可以使用现有的代码来实现这一点。您所需要做的就是添加更多的代码并利用RxJS。更具体地说：

• 在person服务中创建person主题
• 当数据从数据库返回时，执行

  personSubject.next（dataFromDB）

  以添加到person流
• 创建一个函数，将person主题作为可观察对象返回，然后您可以从组件订阅该可观察对象

使用这种方法，每次数据来自您的DB时，该数据都将添加到person流中，订阅该流的任何内容（您的组件）都将获得该数据

快速示例（因为我没有您的完整代码）：

从'rxjs/ReplaySubject'导入{ReplaySubject}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类PersonService{
//受试者
personStream:ReplaySubject=新的ReplaySubject（）；
//可观察的人
人$（）：可观察{
返回此.personStream.asObservable（）；
}
//从数据库中获取person并添加到流中
getDataFromDB（）{
this.http.get（url.subscribe）（响应=>{
this.personStream.next（response.person）；
});
}
}
@组件（{…}）
导出类MyComponent实现OnInit{
人:人,；
构造函数（私有personService:personService）{}
恩戈尼尼特（）{
//订阅person observable。任何时候person数据发生更改时，都将调用它。
this.personService.person$（）.subscribe（person=>this.person=person）；
//如果您从“getDataFromDB”返回“this.http.get（url）”，则可以改为执行此操作。。。
this.personService.getDataFromDB（）.subscribe（person=>this.person=person）；
}
}

---

但这完全是多余的，因为实际上您需要做的就是订阅组件中的

getDataFromDB

函数，因为它本身可以返回一个Person类型的可观察对象。

有两件事-首先，this.mapPersonFromInput（数据[0]）；做第二，this.psn.getName（）的名称在哪里；根据您在init方法中的示例？使用请求的信息更新您在

generatePerson（）

上调用

.subscribe（）

的位置，您是否看到这正是我以前的做法，但这是基于组件和服务之间的一对一通信。是的！我刚找到那篇文章。看起来这是个好的开始！我将实现这个，并进行测试。谢谢@lasanaYeah，但是我喜欢这个想法，并且有五个子组件需要来自服务的数据，所以这可能并不过分，所提出的问题与实际项目相比过于简单。我明白了，这是一个很好的观点。我只是想让它尽可能简单：P但是，是的，这通常是一个很好的实践来遵循可观察的流。什么样的导入应该用于此？ReplaySubject来自？？其他一切看起来都像是我的答案，为服务导入的。