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

Question

在服务中有一些数据，当我在服务上的对象中有数据时，它运行良好，但现在我已经挂接了数据库连接，数据永远不会到达组件。

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

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

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

生成人员看起来像这样：

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

Answer 1

你不应该在这里使用ngOnChanges，它不适用于你想要做的事情。

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

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

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

• 在人员服务中创建人员主题
• 当数据从数据库返回时，personSubject.next(dataFromDB)添加到人员流中。
创建一个函数，该
• 函数将人员主题作为可观察量返回，然后您可以从组件订阅该可观察量

使用此方法，每次数据来自数据库时，该数据都将添加到人员流中，并且订阅该流的任何内容(组件(都将获取数据。

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

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 类型的可观察量。