angular – Class的Set throws使用BehaviorSubject和Observable

发布时间：2020-12-17 17:29:00 所属栏目：安全来源：网络整理

导读：如标题中所述,我在尝试设置新项时遇到以下错误： Cannot invoke an expression whose type lacks a call signature. Type ‘ItemModel’ has no compatible call signatures. 我正在使用BehaviorSubject和Subject在两个不同的状态之间共享一个集合Item.基本

如标题中所述,我在尝试设置新项时遇到以下错误：

Cannot invoke an expression whose type lacks a call signature. Type ‘ItemModel’ has no compatible call signatures.

我正在使用BehaviorSubject和Subject在两个不同的状态之间共享一个集合Item.基本上,我想设置一个选定的项目,然后,当转到其详细信息页面时,获取它.

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

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

这是我的item.service.ts用来获取和设置一个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上我想得到那个项目：

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作为ItemModel
> item作为typeof ItemModel
>来自this answer by @Sefe等的其他解决方案
>检查在Typescript的GitHub问题like this one上打开的很多问题

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

编辑

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

解决方法

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

this._itemService.item = item;

from MDN：

Defining a setter on new objects in object initializers This will
define a pseudo-property current of object language that,when
assigned a value,will update log with that value:

06001

对于null vs item问题：

这是因为您不应该在组件内声明您的服务,而是在NgModule中声明(因此您应该从组件提供程序中删除它)：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!