如何触发页面刷新以更新UI中同级组件中的值更改

Question

当一个同级组件更改值以在另一个同级组件中显示时，我面临问题。该值正在脚本末尾更改，而UI并未反映该更改。

Answer 1

如果要刷新页面，您需要的是location.reload()。这行代码的作用类似于在浏览器中按F5键，因此请考虑是否有任何要保留的数据或更改，或者可以通过完整的页面刷新就可以了。

否则，请考虑使用其他评论中建议的服务。

Answer 2

要在同级组件之间进行通信，应使用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;
    })
  }
}

Demo

在演示中，app.component.ts和hello.component.ts是同级。我们正在使用app.service.ts

进行通信