Angular多组件切换异常：父组件控制失效，无法切回原组件

你的问题出在没有绑定按钮组的选中状态，且仅通过单个布尔值控制Page2显示，未对应处理Page1内容的显示逻辑。按以下步骤修改即可实现双向切换：

1. 修改Page1组件类（.ts文件） #

添加变量存储当前选中的菜单值，默认选中Group1：

// page1.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component {
  selectedGroup: string = 'Group1'; // 默认选中第一个菜单
}

2. 修改Page1模板（.html文件） #

• 给mat-button-toggle-group绑定[(ngModel)]实现选中状态双向绑定
• 分别控制Page1自身内容和Page2组件的显示：

<!-- Page1.html -->
<div fxFlex="none">
  <mat-button-toggle-group name="group1" [(ngModel)]="selectedGroup">
    <mat-button-toggle value="Group1">Group 1</mat-button-toggle>      
    <mat-button-toggle value="Group2">Group 2</mat-button-toggle>
  </mat-button-toggle-group>
</div>

<!-- Page1自身内容：选中Group1时显示 -->
<div *ngIf="selectedGroup === 'Group1'">
  <!-- 此处放置原Page1内容 -->
  Page1 自身内容
</div>

<!-- Page2组件：选中Group2时显示 -->
<div *ngIf="selectedGroup === 'Group2'">
  <app-group2></app-group2>
</div>

原代码问题说明 #

你之前仅用group2布尔值判断是否显示Page2，但点击Group1时未更新该值，也无逻辑控制Page1内容显示，导致切回时Page1内容无法出现。通过绑定按钮组选中值，可直接根据菜单选中状态分别控制两个内容区域的显示，实现任意菜单点击切换对应内容。

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