在Angular中,页面需要刷新才能使DOM捕捉到变化的问题可以通过使用Angular的变更检测机制来解决。Angular的变更检测机制会自动检测组件中的变化,并更新DOM。
下面是一种可能的解决方法:
ChangeDetectionStrategy.OnPush
来实现。import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-cart',
templateUrl: 'cart.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CartComponent {
// ...
}
async
管道在模板中订阅和显示这些项目。
- {{ item.name }}
import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';
@Component({
selector: 'app-cart',
templateUrl: 'cart.component.html'
})
export class CartComponent implements OnInit {
cartItems$: Observable- ;
constructor(private cartService: CartService) {}
ngOnInit() {
this.cartItems$ = this.cartService.getCartItems();
}
removeItem(item: Item) {
this.cartService.removeItem(item);
}
}
import { Injectable, ChangeDetectorRef } from '@angular/core';
@Injectable()
export class CartService {
private cartItems: Item[] = [];
private changeDetectorRef: ChangeDetectorRef;
constructor(changeDetectorRef: ChangeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
}
getCartItems(): Observable- {
return of(this.cartItems);
}
removeItem(item: Item) {
// 从购物车中移除项目
// 更新购物车项目后手动触发变更检测
this.changeDetectorRef.detectChanges();
}
}
通过使用上述解决方法,您应该能够在购物车应用程序中实现自动更新DOM,而无需手动刷新页面。