当一个同级组件更改值以在另一个同级组件中显示时,我面临问题。该值正在脚本末尾更改,而UI并未反映该更改。
如果要刷新页面,您需要的是location.reload()
。这行代码的作用类似于在浏览器中按F5键,因此请考虑是否有任何要保留的数据或更改,或者可以通过完整的页面刷新就可以了。
否则,请考虑使用其他评论中建议的服务。
要在同级组件之间进行通信,应使用Service
。并观察值的变化。
Service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class RecipesService {
cartQty = new EventEmitter<number>();
items = [];
constructor() { }
addToCart(product) {
this.items.push(product);
this.cartQty.emit(this.items.length);
}
getItems() {
return this.items;
}
clearCart() {
this.items = [];
this.cartQty.emit(this.items.length);
return this.items;
}
getCartQty() {
return this.cartQty;
}
}
Sibling.component.ts使用Observable
和subscribe
观察值以获取最新值。
import { Component, Input, OnInit } from '@angular/core';
import { RecipesService } from './app.service';
@Component({
selector: 'hello',
template: `<h1>cart {{qty}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
constructor(private recipesService:RecipesService) {};
qty: number;
@Input() name: string;
ngOnInit() {
this.recipesService.getCartQty().subscribe(res => {
this.qty = res;
})
}
}
在演示中,app.component.ts
和hello.component.ts
是同级。我们正在使用app.service.ts