组件之间有很多通信方式，在这个例子中，我将创建一个服务，用来保存和操作状态。
这里有一个链接：https://stackblitz.com/edit/angular-ivy-fzd5rx

我建议把你的问题写成：如何从同级组件更新组件中输入值？

请回答

组件本身不能直接更改其他同级组件中的@Input值。
以下是一些方法：
"我的建议"
在变更组件上实现ControlValueAccessor以在其上启用ngModeltwo way binding。（names），它将负责在action时更改该值，并将更改后的值发送回父组件。这就是您所需要的全部。下次触发更改检测时，预览组件将通过@输入获得新值。
示例：
在变更组件中：

import { Component, forwardRef} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-change',
  templateUrl: './change.component.html',
  styleUrls: ['./change.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChangeComponent),
      multi: true,
    },
  ],
})
export class ChangeComponent implements ControlValueAccessor {
  names;
  onChange;
  onTouched;
  
  writeValue(obj: any): void {
    this.names = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  changeName() {
    this.names.pop('Test2');
    this.onChange(this.names.slice());
    console.log(this.names);
  }
}

在父组件模板中：

<button (click)="onEnter()">Set Name</button>

<app-table [names]="names"> </app-table>

<app-change [(ngModel)]="names"> </app-change>

此示例非常类似于在组件之间进行通信的@Input @Output方式，在该方式中，通过将新值从更改组件发送到父组件来更改同级组件之间的@Input值，并且当触发Angular 更改检测时，父组件将自动将新值传递给预览组件。
下面是我的stackblitz示例
"另一种方法"
在所有同级组件之上提供一个service，并在服务中定义要更改的值，然后在更改同级组件和预览同级组件中注入服务，并直接在服务中更改值，这种方式不需要angular @Input装饰器。
最后，检查有关components interaction的Angular 文档，以便更好地理解。