Question

我试图通过服务将数据从指令传递到组件。我的转帐服务文件返回表示类型＆＃39;转移＆＃39;不能分配给Observer 。我也得到了＆＃39; Property＆＃39; subscribe＆＃39;类型＆＃39;（）=＆gt;上不存在可观察到的＆＃39;尝试订阅服务时在我的组件文件中。为什么这样，我该如何解决？我的文件是

transfer.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Transfer } from './transfer';

@Injectable()
export class TransferService {

  constructor(private transfer: Transfer){}

  private pageData;
  private contentData;
  private contentBox;

  setData(pData, cData, bData){
    this.pageData = pData;
    this.contentData = cData;
    this.contentBox = bData;
  }

  getData(): Observable<Transfer>{
    this.transfer.page = this.pageData;
    this.transfer.content = this.contentData;
    this.transfer.contentBox = this.contentBox;
    this.clearData();
    return this.transfer;
  }

  clearData(){
    this.pageData = undefined;
    this.contentData = undefined;
    this.contentBox = undefined;
  }
}

transfer.ts

import { ElementRef } from '@angular/core';
export interface Transfer{
    page: [
        {
            pageNum: number,
            subStart: number,
            subEnd: number
        }   
    ];
    content: string;
    contentBox: ElementRef;
}

article.component.ts - 组件

  transfer(){
    this.ts.getData.subscribe(data => this.tsData = data);
  }

paginator.ts - 指令

// Pass date via transferservice.ts
transfer(){
  this.ts.setData(this.pageJump, this.content, this.contentBox);
}

修改使用@ ritaj的解决方案解决了不可分配/属性不存在的问题，但现在我得到了错误：无法解析TransferService的所有参数＆＃39;

STACKBLITZ编辑： https://stackblitz.com/edit/mesh

Answer 1

您的getData()服务方法不会返回Observable，因为您有type d。

它只返回一个普通的JS对象，它显然没有.subscribe（）方法。

将您的article.component.ts transfer()方法更改为：

transfer(){
    this.tsData = this.ts.getData();
  }

将getData签名更改为：

getData(): Transfer {}

Answer 2

article.component.ts

  constructor(public ts : TransferService){}
  transfer(){
     this.tsData = this.ts.getData();   // directly call
  }

在app.module.ts中注入服务： -

providers:[TransferService]

这是Stackblitz链接，只是一个反映问题解决方案的演示： -

https://stackblitz.com/edit/angular5-service-example-onwtg6?file=app/article.component.ts

通过服务在指令/组件之间传递数据

2 个答案:

article.component.ts

在app.module.ts中注入服务： -