Angular 我可以订阅非http数据吗？如何订阅？

我正在建立一个购物车，我想让我的购物车图标显示购物车中的项目数量

目前我还没有为购物车设置API，因为它不是一个优先事项。所以，现在，我有一个服务，它有一个项目数组，每次我点击“添加到购物车”就会添加一个项目

我的问题是，当我向购物车添加物品时，菜单栏中的图标和计数不会更新

如何在不使用http服务的情况下实现这一点

模拟购物车服务

@Injectable()
export class ShoppingcartService {
    //MOCK SERVICE

//fields
items: any[] = [];



//constructor
constructor() { }

//public methods

addToShoppingcart(item: any) {
     this.items.push(item);
}

removeFromShoppingcart() {

}

changeQuantity() {

}

getAllItems() {
    return this.items;
}

getItemsCount() {
    return this.items.length;

}

export class ShoppingcartIconComponent implements OnInit {
count: number;


constructor(private shoppingcartService: ShoppingcartService) {
    this.count = this.shoppingcartService.getItemsCount();
}

ngOnInit() {

}

  <button class="btn btn-warning" (click)="addToCart()">
    <i class="fa fa-plus-square"></i> {{shoppingCartTitle}}
  </button>

   export class AlbumdetailsComponent implements OnInit {
    shoppingcart;

    album: any[];
    id: number;

    shoppingCartTitle: string = "Add to shoppingcart";

    constructor(private musicService: MusicService,
           private activatedRoute: ActivatedRoute,
            private shoppingcartService: ShoppingcartService) 
       {
            this.shoppingcart = this.shoppingcartService.getAllItems();
        }
    ngOnInit() {
//

    }

}

    addToCart() {
        this.shoppingcartService.addToShoppingcart(this.album);
    }

}

购物车图标TS

@Injectable()
export class ShoppingcartService {
    //MOCK SERVICE

//fields
items: any[] = [];



//constructor
constructor() { }

//public methods

addToShoppingcart(item: any) {
     this.items.push(item);
}

removeFromShoppingcart() {

}

changeQuantity() {

}

getAllItems() {
    return this.items;
}

getItemsCount() {
    return this.items.length;

}

export class ShoppingcartIconComponent implements OnInit {
count: number;


constructor(private shoppingcartService: ShoppingcartService) {
    this.count = this.shoppingcartService.getItemsCount();
}

ngOnInit() {

}

  <button class="btn btn-warning" (click)="addToCart()">
    <i class="fa fa-plus-square"></i> {{shoppingCartTitle}}
  </button>

   export class AlbumdetailsComponent implements OnInit {
    shoppingcart;

    album: any[];
    id: number;

    shoppingCartTitle: string = "Add to shoppingcart";

    constructor(private musicService: MusicService,
           private activatedRoute: ActivatedRoute,
            private shoppingcartService: ShoppingcartService) 
       {
            this.shoppingcart = this.shoppingcartService.getAllItems();
        }
    ngOnInit() {
//

    }

}

    addToCart() {
        this.shoppingcartService.addToShoppingcart(this.album);
    }

}

}

购物车图标Html

    <div class="btn btn-outline-info cart">
  <i class="fa fa-shopping-cart">

  </i>
  <div class="count">
    {{count}}
  </div>
</div>

快速截图，Json显示购物车中确实有一个项目，但计数器保持在0。 组件不是彼此的父级或子级，一个在菜单中，另一个在主视图中。

---

是的，你可以。只需使用

observable.of（）

以下是您可以修改的两种方法：

addToShoppingcart(item: any) {
     this.items.push(item);
     return Observable.of({message:'Item Added', addedItem: item})
     //note that object can be anything you want to mock
}


removeFromShoppingcart() {
  return Observable.of({message:'Item Deleted'});
}

changeQuantity() {
}

getAllItems() {
    return Observable.of(this.items); //this automatically wraps the array in an observable
}

getItemsCount() {
    return Observable.of(this.items.length); //this returns a number, but is wrapped in an observable

}

代码的其余部分，你可以像平常一样，将它们视为可观察的，即订阅它们。例如，在构造函数中，可以执行以下操作：

constructor(private shoppingcartService: ShoppingcartService) {
    this.shoppingcartService.getItemsCount()
        .subscribe(count=>this.count = count);
}

注意：要使用的可观察，请记住导入它：

import "rxjs/add/observable/of";

编辑： 我保留上述服务代码以供参考，因为它们回答了问题标题

如果您希望在每次调用

addToShoppingCart（）

时异步更新您的

项目[]

，则需要创建

主题

或

行为主题

，以跟踪它。在下面的示例中，我们将使用

behavior subject

，因为它允许初始化默认值

在您的服务中，创建一个名为

itembesubject

的属性，其类型为

behavior subject

。不要将其与

项目[]

混淆。本主题旨在跟踪您的

项目[]

items: any[] = [];
itemBSubject: BehaviourSubject<any[]>

现在，在修改

项[]

的每个方法中，您还需要使用

.next（）

更新

项子对象

：

现在这里是所有的魔法。对于您的

getItems（）

和

getItemsCount（）

，返回

行为主题（作为可观察对象）

现在，您将意识到您的
计数将自动递增，即使您正在另一个组件中添加该项。
这是我希望的简单性，但它仍然不起作用unfortunately@Vahx啊，什么是路障？和以前一样不幸的是，计数器保持在0。添加了一些console.log（），它向我展示了在向cartUpdate添加内容时从未调用getItemsCount（）方法：当我调用
GetAllItems（）
然后在HTML中执行
{{items.length}
时，observable确实起作用。但是getItemsCount没有按预期工作。不管怎样，谢谢你的帮助。我将看看我是否能想出如何只装载计数而不是整个购物车。：）@请参见编辑。如果你还不明白，我们需要去聊天