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相同，但是来自代码中的静态对象。

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

Answer 1

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

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

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

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

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

通过这种方法，每次数据来自数据库时，该数据都会被添加到人员流中，并且订阅该流的任何内容（您的组件）都将获取数据。

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

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