Class的Set throws无法使用BehaviorSubject和Observable调用其类型缺少调用签名的表达式

Question

如标题中所述,我在尝试设置新内容时遇到以下错误Item:

无法调用类型缺少调用签名的表达式.类型'ItemModel'没有兼容的呼叫签名.

我正在使用BehaviorSubject并在两个不同的状态之间Subject共享一组Item.基本上,我想设置一个选择Item,然后,当进入其详细信息页面,得到它.

这是我的item.model.ts,假设它只有一个id属性:

export class ItemModel {
    public id: string;
    constructor( id: string ) {
        this.id = id;
    }
}

这里是我的item.service.ts用途get和set一个Item:

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

import { ItemModel } from './item.model';

@Injectable()
export class ItemService {

    public _item = new BehaviorSubject<ItemModel>(null);
    item$ = this._item.asObservable();

    public set item(item: ItemModel) {
        this._item.next(item);
    }

    public get item() : ItemModel {
        return this._item.getValue();
    }

}

我item.component.ts会设定一个给定的Item:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { ItemService } from '../item.service';

@Component({
    selector: 'app-item',
    templateUrl: './item.html',
    styleUrls: ['./item.scss'],
    providers: [ItemService]
})

export class ItemComponent {

    constructor(private _router: Router, private _itemService : ItemService) { }

    goToDetails(item : ItemModel){
       this._itemService.item(item); //Throws the error
       this._router.navigate(['/details', item.id]);
    }

}

而且details.page.ts我希望得到Item:

 import { Component } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ItemService } from './item.service';
 import { ItemModel } from './item.model';

 @Component({
     selector: 'app-details-page',
     templateUrl: './details.page.html',
     styleUrls: ['./details.page.scss'],
     providers: [ItemService]
 })

 export class DetailsPage {

     private _item = ItemModel;
     private subscription : Subscription;

     constructor( private _itemService: ItemService ) { }

     ngOnInit() {

         this.subscription = this._itemService.item$
             .subscribe(item => console.log(item));

     }

 }

到目前为止我在调用setter时尝试了什么:

• item as ItemModel
• item as typeof ItemModel
• 其他解决方案来自@Sefe的答案以及更多
• 检查在Typescript的GitHub上打开的很多问题就像这样

我究竟做错了什么？如何确保ItemModel具有兼容的签名？

编辑

在@ n00dl3的帮助下,我能够摆脱这个错误.但是,很不幸,内登录时details.page.ts的ngOnInit我得到null.当我在setter中登录时,它会显示正确的输出.

Answer 1

itemService.item是一个setter所以你不应该像函数一样调用它,而是像属性一样:

this._itemService.item = item;

来自MDN:

在对象初始值设定项中定义新对象的setter这将定义对象语言的伪属性当前,当分配了值时,将使用该值更新日志:

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

对于null vs item问题:

这是因为你不应该在组件内声明你的服务,而是在一个内部NgModule(所以你应该从组件提供者中删除它):

@NgModule({
  imports:[CommonModule],
  declarations:[SomeComponent],
  providers:[ItemService]
})
export class myModule{}

当您在组件的提供者中声明服务时,它仅对该组件可用,dirrectives应用于它及其子组件.(此问题中的更多细节.)因此,这意味着您当前没有在同一个服务实例中DetailsPage进行通信ItemComponent.