Question

我是Angular的新手。我有一个购物车服务和两个不相关的组件 - ProductList Component和Nav Component。我在两个组件中订阅服务，更新ProductList组件中的购物车计数，但导航组件仍然显示初始计数而不是更新的计数。请任何人帮忙。

@Injectable()
export class CartService {

  private initialCount = new BehaviorSubject<number>(0);
  currentCount = this.initialCount.asObservable();
  //cartCount : BehaviorSubject<number>= new BehaviorSubject<number>(0);

  changeCount(count: number) : number {
    this.initialCount.next(count);
    console.log("count in cart service ::: "+count);
    return count;
  }

}

ProductList组件：

export class ProductListComponent{

    count : number;

    constructor(private _cartService : CartService){}

    ngOnInit(){
        this._cartService.currentCount.subscribe(count => this.count = count);
    }
    newCount() : number{
        return this._cartService.changeCount(this.count + 1)
    }
}

ProductList组件HTML：

<button (click)='newCount()'><i class="fa fa-shopping-cart">{{count}}</i></button>

导航组件：

export class NavComponent implements OnInit {

  count : number;

  constructor(private _cartService : CartService){}

  ngOnInit(){
    this._cartService.currentCount.subscribe(count => this.count = count);
    console.log('count in Nav Component :: '+this.count);
  }

}

NavComponent HTML：

<a class="nav-link">Cart ( <i class="fa fa-shopping-cart"> {{count}} </i> )</a>

NavComponent HTML中的计数始终显示为0.请帮助

Answer 1

这是因为您在ProductListComponent中重新提供CartService ...因此获得的实例与全局实例不同。只需将它从ProductListComponent中的提供程序中删除即可。

BTW：你可以查看注入器树的文档，当你使用observable时，你也应该检查ChangeDetection策略（在你的情况下OnPush会更好）。还使用类似的东西：

// in nav.component.ts
count$: Observable<number>
...

this.count$ = this._cartService.currentCount
...

// in nav.component.html
...
{{count$ | async}}
...

```

会更加惯用，并为您处理取消订阅和更改检测。

无法使用Angular中的行为主题

1 个答案: