¿Por qué el componente principal no se actualiza cuando se guarda el formulario con el operador de propagación, pero cuando se usa "empujar" funciona? Angular

Cuando uso [...this.characters, this.new].. en characters.component.html no actualiza la lista, pero cuando uso this.characters.push(this.new) funciona... ¿Por qué??

//add.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { Character } from '../interfaces/dbz';
@Component({
 selector: 'app-add',
 templateUrl: './add.component.html',
 styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
 @Input() new: Character = {
 name: '',
 power: 0,
 };
 @Input() characters: Character[] = [];
 save(): void {
 // this.characters= [...this.characters, this.new] Doesn't works:(
 this.characters.push( this.new)
 this.new = {
 name: '',
 power: 0,
 };
 }
 constructor() { 
 
 }
 ngOnInit(): void {
 }
}

En este formulario llamo a mi método de guardar

//add.component.html
<h3>Add {{ new.name }}</h3>
<hr />
<form (ngSubmit)="save()" action="">
 <input type="text" placeholder="Name" name="name" [(ngModel)]="new.name" />
 <input
 type="number"
 placeholder="Power"
 name="power"
 [(ngModel)]="new.power"
 />
 <button type="submit">Add</button>
</form>

///characters.component.ts
import { Component, OnInit,Input} from '@angular/core';
import { Character } from '../interfaces/dbz';
@Component({
 selector: 'app-characters',
 templateUrl: './characters.component.html',
 styleUrls: ['./characters.component.css']
})
export class CharactersComponent implements OnInit {
 @Input() characters: Character[] = [];
 constructor() {
 }
 ngOnInit(): void {
 }
}

La lista no se actualiza cuando uso el operador de propagación, pero cuando presiono el nuevo elemento, agrego un nuevo carácter en la lista

//characters.component.html
<h3>Characters</h3>
<hr />
<ul>
 <li *ngFor="let item of characters;debugger">{{ item.name }} - {{ item.power }}</li>
</ul>

Aquí llamo a mis componentes pasando el carácter y el nuevo carácter al formulario y pasando el carácter a la lista html

///main-page.component.html
<div class="row">
 <div class="col">
 <app-characters [characters]="characters"></app-characters>
 </div>
 <div class="col">
 <app-agregar [characters]="characters" [new]="new"></app-agregar>
 </div>
</div>

Aquí inicializo mi lista de personajes y mi nuevo personaje.

//main-page.component.ts
import { Component, OnInit} from '@angular/core';
import { Character } from '../interfaces/dbz';
@Component({
 selector: 'app-main-page',
 templateUrl: './main-page.component.html',
 styleUrls: ['./main-page.component.css']
})
export class MainPageComponent implements OnInit {
 new: Character = {
 name: '',
 power: 0,
 };
 characters: Character[] = [
 {
 name: 'Goku',
 power: 12000,
 },
 {
 name: 'Vegeta',
 power: 7500,
 },
 {
 name: 'Krilin',
 power: 1200,
 },
 ];
 constructor() { 
 
 }
 ngOnInit(): void {
 
 }
}

Necesito ayuda. No sé por qué cuando empujo la lista... mi lista de caracteres se actualiza y cuando uso el operador de propagación no hace nada.

Solución del problema

Esto se debe a las referencias a la memoria.

Comienzas MainPageComponentdonde declaras una matriz de caracteres. Llamaremos a esto, memRef0.

Luego lo envía a través de una Entrada, a sus componentes. Así memRef0se aplica a las entradas de los componentes. En AddComponent, significa que la matriz de caracteres, que es memRef1, apunta a memRef0.

En tu AddComponent, haces esto:

/* 1 */ this.characters= [...this.characters, this.new]
/* 2 */ this.characters.push( this.new)

La segunda línea inserta un valor en memRef0, por lo que funciona, la referencia de memoria se actualiza.

Pero la primera línea, dice que memRef1no debe apuntar a memRef0más, sino a otro, que es memRef2.

Como memRef2se desconoce de MainPage, no se actualiza.

Para resolver eso, use pushcomo lo hizo o use un @Output() add = new EventEmitter();para notificar el cambio a MainPage, y MainPage se encargará de actualizar memRef0, que a su vez se propagará a los componentes secundarios.