Передача данных из службы в компонент --> дочерние компоненты

Глядя на этот пример Angular.io — Dynamic Forms, он по существу создает форму из метаданных во время выполнения.

Есть пара комментариев, указывающих на то, что пример не совсем закончен.

@Injectable()
export class QuestionService {

  // Todo: get from a remote source of question metadata
  // Todo: make asynchronous
  getQuestions() {
  ...

Это шаги, которые я предпринял, чтобы закончить его и очистить сообщения об ошибках.

вопрос.service.ts

Изменено getQuestions для асинхронного возврата вопросов.

Injectable()
export class QuestionService {

  constructor(
    private http: Http
  ) {}

  getQuestions$() {
    const url = 'https://api.myjson.com/bins/d0srd';
    return this.http.get(url)
      .map(response => response.json())
      .map(questionMetadata => this.metadataToQuestions(questionMetadata))
      .map(questions => questions.sort((a, b) => a.order - b.order))
  }

  private metadataToQuestions(questionMetadata) {
    return questionMetadata.questions.map(this.toQuestion)
  }

  private toQuestion(elementData) {
    // expand for additional control types
    return new TextboxQuestion({
      key: elementData.elementname,
      label: elementData.displaytext,
      value: elementData.elementvalue,
      required: false,
      order: elementData.sortorder
    })
  }
}

app.component.ts

Изменен тип переменной questions на наблюдаемый, добавлен асинхронный канал в шаблон.

@Component({
  ...
  template: `
    <div>
      <h2>Job Application for Heroes</h2>
      <app-dynamic-form [questions]="(questions$ | async)"></app-dynamic-form>
    </div>
  `,
  ...
})
export class AppComponent implements OnInit {

  questions$: Observable<any>;

  constructor(
    private questionService: QuestionService
  ) {}

  ngOnInit() {
    this.questions$ = this.questionService.getQuestions$();
  }
}

динамическая-form.component.ts

Переменная @Input questions изменена на стиль установки/получения для обработки начального нулевого значения.
Изменен хук, в котором создается форма, с ngOnInit на ngOnChanges для обработки асинхронного поступления вопросов.

export class DynamicFormComponent implements OnChanges {

  private _questions = [];
  @Input() 
  set questions(value: any[]) {
    this._questions = value || [];
  }
  get questions(): any[] {
    return this._questions;
  }

  ...

  ngOnChanges() {
    this.form = this.qcs.toFormGroup(this.questions);
  }

}

динамическая форма-question.component.ts

Добавьте дополнительную проверку в геттер isValid, чтобы убедиться, что проверяемый элемент управления существует.

export class DynamicFormQuestionComponent {
  ...
  get isValid() { return this.form.controls[this.question.key] 
    ? this.form.controls[this.question.key].valid : true; }
}

Я не уверен, что понял вашу проблему, но когда мне нужно передать данные из службы в компонент, я использую подписку таким образом.

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

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

mycomponent.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MyComponentService{
    // Observable 
    private sampleObservable = new Subject<boolean>();
    // Observable boolean streams
    sampleSubscriber = this.sampleObservable.asObservable();
    // Event for notification from publisher to subscriber
    sampleEventChanged(value:boolean)
    {
        this.sampleObservable.next();
    }
}

В компоненте, который хочет уведомить всех подписчиков об изменении своего состояния:

mycomponent-publisher.ts

import { Component } from '@angular/core';
import { MyService } from './mycomponent.service';

@Component({
  selector: 'app-my-control-publisher',
  template: `
  <h2>This is the publisher control</h2>
  <button (click)="announce()">Announce to subscriber</button>
  `,
  providers: [MyService]
})

export class MyControlPublisherComponent 
{
  constructor(private myService: MyService) { }

  announce() 
  {
    this.myService.sampleEventChanged(true);
  }
}

В компоненте подписчика, который хочет получить уведомление.

mycomponent-subscriber.ts

import { Component, OnDestroy } from '@angular/core';
import { MyService } from './mycomponent.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
 selector: 'app-my-control-subscriber',
 template: `
 <h2>This is the subscriber control</h2>
 `,
})

export class MyControlSubscriberComponent 
{
  // Subscriptions
  private componentSubscription: Subscription;

  constructor(private myService: MyService) 
  {
    // Subscription of the notifications
    this.componentSubscription= this.myService.sampleSubscriber.subscribe(value =>
    {
      // Put the code for manage the notification here
    }
  }

  ngOnDestroy()
  {
    // Release subscription to avoid memory leaks when the component is destroyed
    this.componentSubscription.unsubscribe();
  }
}

Я надеюсь, что это может помочь вам.