Question

我正在尝试在组件中导入一个服务但是当我调用来自此服务的Input时，在我的模板中，它不会呈现任何内容。

这是我的实体：

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}}会给我一个空白的结果而没有错误..任何人都可以提供帮助吗？我花了好几个小时在互联网上寻找并试图让它发挥作用。

修改我试图在面包屑组件中使用它。以下是我的module-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>

我也在bread-crumb-component中调用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;
}

我正在尝试在module-breads-crumbs.html中使用pageState condition执行ngIf，但没有任何效果：

<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

的模板中

@Input或服务在组件

1 个答案: