Данные 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) добавить в поток человека.
• Создайте функцию, которая будет возвращать субъект субъекта в качестве наблюдаемой, а затем вы можете подписаться на эту наблюдаемую из своего компонента

При таком подходе каждый раз, когда данные поступают из вашей БД, эти данные будут добавляться в личный поток, и все, кто подписан на этот поток (ваш компонент), получит данные.

Быстрый пример (так как у меня нет вашего полного кода):

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 функция в вашем компоненте, так как она сама может возвращать наблюдаемую персону типа.