可能是因为在不同的组件中使用相同名称的变量导致的冲突。可以考虑将该变量存储在一个Angular服务中,并在需要更新该变量的组件中注入该服务。以下是一个简单的示例:
在app.module.ts中定义服务
import { Injectable } from '@angular/core';
@Injectable()
export class CartService {
addedToCart: boolean = false;
addToCart() {
this.addedToCart = true;
}
clearCart() {
this.addedToCart = false;
}
}
在需要使用该变量的组件中注入该服务
import { Component, OnInit } from '@angular/core';
import { CartService } from '../cart.service';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor(private cartService: CartService) { }
addToCart() {
this.cartService.addToCart();
}
ngOnInit(): void {
}
}
从CartService中获取updatedValue
import { Component, OnInit } from '@angular/core';
import { CartService } from '../cart.service';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
addedToCart: boolean;
constructor(private cartService: CartService) { }
ngOnInit(): void {
this.addedToCart = this.cartService.addedToCart;
this.cartService.updatedValue.subscribe(
(value) => {
this.addedToCart = value;
}
);
}
clearCart() {
this.cartService.clearCart();
}
}
通过CartService变量的变化,addCart并更新页面。