Typescript 如何使用angular15取消选中位于其他组件中的复选框

我正在和Angular15一起工作.我需要帮助，因为我更改了复选框 Select .

根据要求，我有一个菜单栏和复选框.复选框来自可重用组件.此复选框可重复使用菜单栏页面中使用的组件.默认情况下，该复选框处于选中状态.但当我更改菜单栏选项时，应该取消选中该复选框.

在上面的"Display"(显示)页面中，复选框处于选中状态.我想通过更改菜单选项来取消选中该复选框.如果我点击"用户"，复选框应该是取消选中的.每次更改菜单选项时，如果复选框处于选中状态，则应将其取消选中.

selectionpage.component.html个

<p>Check Box Selection!</p>

<input type="checkbox" [(ngModel)]="isChecked">Select All

添加了一个输入参数为"islogic"的复选框.

selectionpage.component.ts个

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

@Component({
  selector: 'app-selectionpage',
  templateUrl: './selectionpage.component.html',
  styleUrls: ['./selectionpage.component.scss']
})
export class SelectionpageComponent {
@Input() isChecked:boolean=true;
}

现在，我将使用"DisplayPage"中的"SelectionPage"来添加复选框.

display-page.component.html

<div class="tab-menu-container">
  <div class="tab-menu-wrapper">
    <ng-container *ngFor="let selectvalue of selectionContent">
      <div class="tab">
        <span (click)="changerArchiveType()" style="cursor: pointer;">{{ selectvalue }}</span>|
      </div>
    </ng-container>
  </div>
</div>
<app-selectionpage [isChecked]="SelectionChange"></app-selectionpage>

display-page.component.scss个

.tab-menu-container{
    height: 56px;
    display:flex;
    justify-content: center;
    background: #f2f2f2;
    .tab-menu-wrapper{
        width: 85%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
        padding-top: 20px;

        .tab{
            width: fit-content;
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
        }
    }
}

display-page.component.ts个

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

@Component({
  selector: 'app-display-page',
  templateUrl: './display-page.component.html',
  styleUrls: ['./display-page.component.scss'],
})
export class DisplayPageComponent {
  public selectionContent: Array<string> = [
    'User',
    'Admin',
    'SuperAdmin',
    'Seller',
  ];
  public SelectionChange:boolean=false;
  changerArchiveType() {
    this.SelectionChange=false;
    console.log("Checked:",this.SelectionChange)
  }
}

现在，页面上出现了带有选项和复选框的"菜单栏".

如果我更改了菜单栏选项，复选框应该是取消选中的.它是在页面加载后第一次发生的.但在此之后，通过更改菜单来取消选中不起作用.

谢谢你