5

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

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

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

1 回答 1

4

你不应该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 类型的 observable。

于 2017-08-02T14:56:07.363 回答