@ Ввод или обслуживание не работает в компоненте

Question

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

Вот моя сущность:

export interface PageState { 
    step: string; 
} 

export class SimplePageState implements PageState { 
    step: string; 
} 

Вот моя служба:

import { Injectable } from '@angular/core'; 
import { PageState } from './state.entity'; 

@Injectable() 
export class PageStateService { 
    getPageState(): Promise<PageState[]> { 
    const step = [{ 'step': '1' }]; 

    return Promise.resolve(step); 
    // return this.http.get('/api/status'); 
    } 
} 

Я ввожу и инстанцировании это в моей основной компонент:

import { Component, OnInit } from '@angular/core'; 
import { Module } from '../modules/core/module.entity'; 
import { ModuleService } from '../modules/core/module.service'; 
import { PageState } from './state.entity'; 
import { PageStateService } from './state.service'; 

@Component({ 
    selector: 'df-esign', 
    templateUrl: './esign-page.html', 
    styleUrls: ['./esign-page.scss'], 
    providers: [ ModuleService, PageStateService ] 
}) 
export class EsignComponent implements OnInit { 
    modules: Module[]; 
    pageState: PageState[]; 

    constructor(private moduleService: ModuleService, private pageStateService: PageStateService) { } 

    getModules() { 
    this.moduleService.getModules().then(modules => this.modules = modules); 
    } 

    getPageState() { 
    this.pageStateService.getPageState().then(pageState => this.pageState = pageState); 
    } 

    ngOnInit() { 
    this.getModules(); 
    this.getPageState(); 
    } 
} 

И, наконец, я я использую SimplePageState внутри конкретного компонента, таким образом:

import { Component, Input } from '@angular/core'; 
import { SimpleModule } from '../core/module.entity'; 
import { SimplePageState } from '../../core/state.entity'; 

@Component({ 
    selector: 'df-module-page', 
    templateUrl: './module-page.html', 
    styleUrls: ['./module-page.scss'], 
}) 

export class ModulePageComponent { 
    @Input() module: SimpleModule; 
    @Input() pageState: SimplePageState; 
} 

Но попытка сделать {{pageState}} в моем шаблоне дает мне пустой результат без ошибок. Любой может помочь? Я много часов смотрел в Интернете и пытался заставить его работать.

Редактировать: Я пытаюсь использовать его внутри компонента хлебной крошки. Вот начало моего модуля-view.html, который содержит df-module-page, а также df-module-bread-crumbs:

<ng-container [ngSwitch]="module.type"> 
    <template [ngSwitchCase]="'PageModule'"><df-module-page [module]="module" [pageState]="pageState"></df-module-page></template> 
    <template [ngSwitchCase]="'TextModule'"><df-module-text [module]="module"></df-module-text></template> 
    <template [ngSwitchCase]="'BreadCrumbModule'"><df-module-bread-crumb [module]="module" [pageState]="pageState" class="{{module.class}}"></df-module-bread-crumb></template> 

Я зову SimplePageState в хлебных крошек-компонент тоже:

import { Component, Input, HostBinding } from '@angular/core'; 
import { SimpleModule } from '../core/module.entity'; 
import { SimplePageState } from '../../core/state.entity'; 

@Component({ 
    selector: 'df-module-bread-crumb', 
    templateUrl: './module-bread-crumbs.html', 
    styleUrls: ['./module-bread-crumbs.scss'] 
}) 

export class ModuleBreadCrumbsComponent { 
    @Input() module: SimpleModule; 
    @Input() pageState: SimplePageState; 
} 

И I пытаюсь сделать ngIf внутри модуль-хлеба-crumbs.html с pageState condition, который не имеет никакого эффекта:

<div class="dfbreadcrumbs"> 
    <ol *ngIf="module"> 
    <li *ngFor="let crumb of module.slots.crumbs; let i = index" class="step_{{i + 1}}">{{crumb.text}}</li> 
    </ol> 
</div> 
<div *ngIf="pageState">ohohoh</div> 

Answer 1

Для того, чтобы передавать данные на вход вам нужно будет что-то вроде

<df-module-page [pageState]="pageState"> 

в шаблоне EsignComponent