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() 只是 returns 我存储在服务中的对象。

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

Answer 1

你不应该在这里使用 ngOnChanges，它不是你想要做的。

根据您的问题，您的目标是：

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

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

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

使用这种方法，每次数据来自您的数据库时，该数据都将添加到人员流中，任何订阅该流（您的组件）的对象都将获取数据。

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

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 函数，因为它本身可以 return Person 类型的可观察对象。

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

Angular 4 Data in Service, passing to component(s)

typescript

angular-services

ngonchanges

ngoninit

angular