Angular为何不渲染BoxComponent？如何实现组件数据同步更新？

你的推测完全正确 #

当你在AppComponent模板里写<app-box>标签时，Angular会自动生成一个全新的BoxComponent实例——和你在AppComponent类里用new BoxComponent()手动创建的实例是完全独立的两个对象。所以你修改手动创建的那个实例的cards数组，模板里实际渲染的组件根本感知不到，自然不会更新视图。

正确的实现方式 #

方法1：用ViewChild获取模板里的组件实例（最直接） #

通过Angular提供的ViewChild装饰器，拿到模板中真正渲染的BoxComponent实例，直接调用它的方法：

1. 修改app.component.ts：

import { Component, ViewChild } from '@angular/core';
import { BoxComponent } from './box.component';

export class AppComponent {
  title = 'test';
  // 获取模板里的<app-box>实例
  @ViewChild(BoxComponent) box!: BoxComponent;

  push() {
    this.box.top_up(Math.floor(Math.random() * 10));
  }
}

2. app.component.html保持不变：

<app-box></app-box>
<button (click)="push()">Top-up</button>

点击按钮时，就会直接操作模板里的那个组件实例，视图会自动更新。

方法2：用@Input传递数据（符合Angular数据流规范） #

遵循Angular单向数据流的设计理念，把数据放在父组件，通过@Input传给子组件：

1. 修改BoxComponent，添加@Input装饰器：

import { Component, Input } from '@angular/core';

export class BoxComponent {
  @Input() cards: number[] = [];
}

2. 修改AppComponent，自己维护数据数组：

export class AppComponent {
  title = 'test';
  cards: number[] = [];

  push() {
    this.cards.push(Math.floor(Math.random() * 10));
  }
}

3. 修改app.component.html，把数组传给子组件：

<app-box [cards]="cards"></app-box>
<button (click)="push()">Top-up</button>

这种方式下，父组件管数据，子组件只管渲染，数据变化时Angular会自动更新子组件视图。

方法3：用服务共享数据（适合复杂场景） #

如果组件层级深、多个组件需要共享数据，可以创建一个服务来管理状态：

1. 创建数据服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CardService {
  private cardsSubject = new BehaviorSubject<number[]>([]);
  cards$ = this.cardsSubject.asObservable();

  addCard(val: number) {
    const currentCards = this.cardsSubject.value;
    this.cardsSubject.next([...currentCards, val]);
  }
}

2. 修改BoxComponent订阅服务数据：

import { Component, OnInit } from '@angular/core';
import { CardService } from './card.service';

export class BoxComponent implements OnInit {
  cards: number[] = [];

  constructor(private cardService: CardService) {}

  ngOnInit() {
    this.cardService.cards$.subscribe(cards => {
      this.cards = cards;
    });
  }
}

3. 修改AppComponent调用服务方法：

import { Component } from '@angular/core';
import { CardService } from './card.service';

export class AppComponent {
  title = 'test';

  constructor(private cardService: CardService) {}

  push() {
    this.cardService.addCard(Math.floor(Math.random() * 10));
  }
}

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

<app-box></app-box>
<button (click)="push()">Top-up</button>

这种方式适合大型应用，能更高效地管理全局状态。

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