Можно ли связать функцию, которая возвращает наблюдаемое в @Input?

Question

Я угловое 7 приложение, которое содержит много различных типов сертификатов и приложений для этих сертификатов. В процессе создания нового приложения я должен загрузить данные с сервера данных в зависимости от типа сертификации и создаваемого приложения. Из-за асинхронного характера rxjs Observables, возвращаемых из сервисов, я пытаюсь передать все как Observable из одного компонента в другой.

Исходя из того, что я прочитал, и других вопросов, на которые я видел ответы, здесь у меня есть следующий код в шаблоне компонента, который я пытаюсь создать:

new-bcaba.component.html - Шаблон

  <div class="open-card-BG" *ngIf="CurrentPage == 1">
    <instructions [InstCertType]="ParentCertType$ | async" [InstAppType]="ParentAppType$ | async"></instructions>
  </div>

new-bcaba.component.ts - Машинопись

export class NewBcabaComponent extends ApplicationComponent implements OnInit {

  //public ParentCertType$: Observable<CertType>;
  //public ParentAppType$: Observable<AppType>;

  public constructor(NewInject: Injector) { 
    super(NewInject, '2', '1', 11);
  }

  ngOnInit() {
    super.ngOnInit();
    //this.ParentCertType$ = this.ShowCertType();
    //this.ParentAppType$ = this.ShowAppType();
  }

  private ShowCertType() : Observable<CertType> {
    console.log("... ShowCertType called ... ");
    return this.BaseCertType$;
  }

  private ShowAppType() : Observable<AppType> {
    console.log("... ShowAppType called ... ");
    return this.BaseAppType$;
  }

  // Accessors
  public get ParentCertType$() : Observable<CertType> {
    return this.ShowCertType();
  }

  public get ParentAppType$() : Observable<AppType> {
    return this.ShowAppType();
  }

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

... ShowCertType called ...                           new-bcaba.component.ts:27 
... GetCertType in Certification Component called ... certification.component.ts:49
... FindCertType in Model-tools.service called ...                  model-tools.service.ts:53
... GetCertTypes in Model-tools.service called ...                  model-tools.service.ts:48

ERROR TypeError: fn is not a function                  NewBcabaComponent.html:3
    at pipe.js:18
    at Array.reduce (<anonymous>)
    at piped (pipe.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.pipe (Observable.js:91)
    at ModelToolsService.push../src/app/_services/model-tools.service.ts.ModelToolsService.FindCertType (model-tools.service.ts:55)
    at NewBcabaComponent.push../src/app/certification/certification.component.ts.CertificationComponent.GetCertType (certification.component.ts:50)
    at NewBcabaComponent.get [as BaseCertType$] (certification.component.ts:54)
    at NewBcabaComponent.push../src/app/certification/application/new-bcaba/new-bcaba.component.ts.NewBcabaComponent.ShowCertType (new-bcaba.component.ts:28)
    at NewBcabaComponent.get [as ParentCertType$] (new-bcaba.component.ts:37)
    at Object.eval [as updateDirectives] (NewBcabaComponent.html:3)

Судя по сообщениям console.log, проблема, похоже, заключается в том, как я связываю Observable с шаблоном, но он выглядит правильно на основании прочитанного. Я что-то не так делаю?

Answer 1

Да.Это возможно.

Я создаю простой код, чтобы показать, насколько легко вы это делаете:

https://stackblitz.com/edit/observable-service-x3qwbh?file=app/child/child-complonent/child-complonent.component.html

Если вы хотите исправить свой код, я думаю, выследует изменить ваш шаблон, как показано ниже:

<div class="open-card-BG" *ngIf="CurrentPage == 1">
   <instructions [InstCertType]=ParentCertType$ 
  [InstAppType]=ParentAppType$></instructions>
</div>