Angular12中*ngFor数组更新后视图不刷新，ChangeDetectorRef也无效

问题根因 #

你当前的问题核心是给ChatComponent同时加了@Injectable({ providedIn: 'root' })装饰器，导致父组件调用addMessage方法所属的实例，和页面上实际渲染的组件实例不是同一个，你修改全局单例实例的数组自然不会触发渲染实例的视图更新。

解决方案 #

• 第一步：移除ChatComponent上的@Injectable({ providedIn: 'root' })装饰器。Angular组件仅需要@Component装饰器即可，不需要配置为全局可注入的服务。
• 第二步：父组件通过@ViewChild获取页面中实际渲染的ChatComponent实例，再调用addMessage方法，示例代码如下：

// 父组件ts代码
import { ViewChild } from '@angular/core';
import { ChatComponent } from './chat/chat.component';

export class ParentComponent {
  // 获取页面中渲染的ChatComponent实例
  @ViewChild(ChatComponent) private chatComponent!: ChatComponent;

  // 触发发送消息的方法
  public handleSendMessage(content: string): void {
    this.chatComponent.addMessage(content, 'user');
  }
}

• 第三步：优化ChatComponent的代码，删除冗余的ChangeDetectorRef调用，默认变更检测策略下，你用展开运算符生成新数组已经满足变更检测触发条件，不需要手动触发检测：

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
  messageArray: Array<{message: string, style: string}> = [{message: "test message 1", style: "answer"}];

  constructor() {}
  ngOnInit(): void {}

  addMessage(message: string, style: string): void {
    this.messageArray = [...this.messageArray, {message, style}];
    console.log(this.messageArray);
  }
}

• 特殊情况适配：如果你的addMessage是被Angular zone之外的异步逻辑触发（比如原生WebSocket回调、第三方库的异步回调），可以引入NgZone包裹更新逻辑确保变更检测生效：

import { NgZone } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
  messageArray: Array<{message: string, style: string}> = [{message: "test message 1", style: "answer"}];

  constructor(private ngZone: NgZone) {}
  ngOnInit(): void {}

  addMessage(message: string, style: string): void {
    this.ngZone.run(() => {
      this.messageArray = [...this.messageArray, {message, style}];
    })
  }
}

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