Angular4中子组件向父组件传递数据的实现方案

解决方案步骤 #

1. 创建全局共享的购物车状态服务 #

这个服务会用BehaviorSubject来存储和传递购物车数量——它能保存最新值，并且订阅者初始化时就能拿到当前的最新数据，完美适配你的实时更新需求。

// cart.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 全局单例，所有组件共享同一个实例
})
export class CartService {
  // 初始化购物车数量为0
  private cartCountSubject = new BehaviorSubject<number>(0);
  // 对外暴露可观察对象，防止外部直接修改内部状态
  cartCount$ = this.cartCountSubject.asObservable();

  // 更新购物车数量的方法
  updateCartCount(count: number) {
    this.cartCountSubject.next(count);
  }
}

2. 修改my-cart组件：更新服务状态并导航回父组件 #

在API请求成功后，把返回的ITEM_QTY同步到共享服务，然后导航回父组件页面。

// my-cart.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { SessionStorageService } from 'angular-web-storage';
import { CartService } from '../cart.service'; // 引入共享服务

@Component({
  selector: 'app-my-cart',
  templateUrl: './my-cart.component.html',
  styleUrls: ['./my-cart.component.css']
})
export class MyCartComponent  {
  res: any;
  fixedTimezone: string = new Date().toISOString(); // 保持你的原有时间逻辑

  constructor(
    private http: HttpClient,
    private router: Router,
    private sessionStorage: SessionStorageService,
    private cartService: CartService // 注入共享服务
  ) {}

  public sendRecord(Totalcartval: number ) {  
    this.http.get('http://freegeoip.net/json/?callback')
               .subscribe(
                  data => this.saveIP(data['ip'], Totalcartval),
                  error => console.error(error)
               );
  }

  saveIP(address: string, cartval: number) {
    this.http.get(`http://localhost:57036/api/data/CartCount/?IP_ADDRESS=${address}&ITEM_QTY=${cartval}&TIME=${this.fixedTimezone}`)
             .subscribe(data => {
               const newCartCount = data['ITEM_QTY'];
               this.res = newCartCount;
               // 把最新数量同步到共享服务
               this.cartService.updateCartCount(newCartCount);
               // 导航回父组件页面，替换成你的父组件路由路径（比如 '/' 或 '/product-list'）
               this.router.navigate(['/']);
             });
  }  

  ngOnInit() {}
}

3. 修改app组件：订阅服务状态实时更新 #

在根组件中订阅共享服务的购物车数量变化，实时更新totalcartval的值。

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CartService } from './cart.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  totalcartval: number = 0;
  private cartCountSubscription: Subscription;

  constructor(private cartService: CartService) {}

  ngOnInit() {
    // 订阅购物车数量变化，实时更新页面显示
    this.cartCountSubscription = this.cartService.cartCount$.subscribe(count => {
      this.totalcartval = count;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.cartCountSubscription) {
      this.cartCountSubscription.unsubscribe();
    }
  }
}

4. 保持app.component.html不变 #

你的原有模板无需修改，{{totalcartval}}会通过订阅自动实时更新：

<div class="col-3">
  <br>
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">
            <i class="fas fa-shopping-bag text-primary" style="font-size:40px"></i>
        </span>
      </div>
      <input type="text" class="form-control bg-white"  placeholder="My Cart" value="  My Cart  {{totalcartval}} Item(s)" readonly >  
    </div>
  </form>
</div>

关键说明 #

• 为什么@Output失效？因为@Output依赖父组件模板中直接包含子组件标签（比如<app-my-cart (ChildEvent)="handleEvent($event)"></app-my-cart>），但你的子组件是通过路由单独打开的，两者没有模板嵌套关系，所以事件无法触发。
• 为什么用BehaviorSubject？它能保存最新的购物车数量，当app组件初始化订阅时，会立即拿到当前的最新值（包括之前子组件更新的结果），而普通Subject不会发送历史值。
• 全局服务的providedIn: 'root'确保整个应用只有一个服务实例，保证状态是全局共享的。

内容的提问来源于stack exchange，提问作者Nikson