如何点击mat-checkbox跳转组件并保持选中状态？

你的问题核心在于：当点击复选框跳转路由时，原组件被销毁，新组件初始化时没有继承/读取之前的复选框选中状态，同时直接用(click)事件可能会干扰复选框的默认选中逻辑。下面提供两种实用方案：

方案一：通过路由查询参数传递状态 #

这种方式适合简单的状态传递，把复选框的选中状态作为路由参数携带到目标组件，目标组件读取参数后设置复选框状态。

组件1 修改代码 #

HTML部分：

<div class="row col s12">
  <div class="input-field col s1">
    <p>Sort:</p>
  </div>
  <div class="input-field col s2">
    <!-- 用(change)替代(click)，绑定双向ngModel控制选中状态 -->
    <mat-checkbox class="example-margin" 
                  [(ngModel)]="isAllEventsChecked"
                  (change)="handleAllEventsChange()">
      Get all events:
    </mat-checkbox>
  </div>
</div>
<hr>
<div *ngFor="let item of events">
  {{item.id}} {{item.name}}
</div>

TS部分：

import { Router, ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms'; // 记得在模块中导入FormsModule！

// ...
isAllEventsChecked = false; // 初始化选中状态

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit() {
  this.events = this.service.getData();
  // 初始化时读取当前路由的查询参数，恢复状态（比如从组件2返回时）
  this.route.queryParams.subscribe(params => {
    this.isAllEventsChecked = params['isChecked'] === 'true';
  });
}

public handleAllEventsChange() {
  // 跳转时携带选中状态作为查询参数
  this.router.navigate(['/main/all_events_acted0/'], {
    queryParams: { isChecked: this.isAllEventsChecked }
  });
}

组件2 修改代码 #

HTML部分：

<div class="row col s12">
  <div class="input-field col s1">
    <p>Sort:</p>
  </div>
  <div class="input-field col s2">
    <mat-checkbox class="example-margin" 
                  [(ngModel)]="isAllEventsBy0Checked"
                  (change)="handleAllEvents0Change()">
      Get All events by 0:
    </mat-checkbox>
  </div>
</div>
<hr>
<div *ngFor="let item of getalleventsby0">
  {{item.id_events}} {{item.name_events}} {{item.type_events}}
</div>

TS部分：

import { Router, ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms';

// ...
isAllEventsBy0Checked = false;

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit() {
  this.getalleventsby0 = this.service.getData();
  // 读取路由参数，设置复选框初始状态
  this.route.queryParams.subscribe(params => {
    this.isAllEventsBy0Checked = params['isChecked'] === 'true';
  });
}

public handleAllEvents0Change() {
  this.router.navigate(['/main/getallevents0/'], {
    queryParams: { isChecked: this.isAllEventsBy0Checked }
  });
}

方案二：使用共享服务持久化状态 #

如果需要在多个组件间共享状态，或者状态逻辑更复杂，推荐用Angular服务来保存状态（用BehaviorSubject可以持续订阅状态变化）。

步骤1：创建共享服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CheckboxStateService {
  // 创建BehaviorSubject保存选中状态，初始值为false
  private allEventsChecked$ = new BehaviorSubject<boolean>(false);
  private allEventsBy0Checked$ = new BehaviorSubject<boolean>(false);

  // 暴露可观察对象供组件订阅
  getAllEventsChecked() {
    return this.allEventsChecked$.asObservable();
  }

  setAllEventsChecked(state: boolean) {
    this.allEventsChecked$.next(state);
  }

  getAllEventsBy0Checked() {
    return this.allEventsBy0Checked$.asObservable();
  }

  setAllEventsBy0Checked(state: boolean) {
    this.allEventsBy0Checked$.next(state);
  }
}

组件1 修改代码 #

HTML部分：

<div class="row col s12">
  <div class="input-field col s1">
    <p>Sort:</p>
  </div>
  <div class="input-field col s2">
    <mat-checkbox class="example-margin" 
                  [(ngModel)]="isAllEventsChecked"
                  (change)="handleAllEventsChange()">
      Get all events:
    </mat-checkbox>
  </div>
</div>
<hr>
<div *ngFor="let item of events">
  {{item.id}} {{item.name}}
</div>

TS部分：

import { Router } from '@angular/router';
import { CheckboxStateService } from './checkbox-state.service';
import { FormsModule } from '@angular/forms';

// ...
isAllEventsChecked = false;

constructor(private router: Router, private stateService: CheckboxStateService) {}

ngOnInit() {
  this.events = this.service.getData();
  // 订阅服务的状态，同步复选框状态
  this.stateService.getAllEventsChecked().subscribe(state => {
    this.isAllEventsChecked = state;
  });
}

public handleAllEventsChange() {
  // 更新服务中的状态
  this.stateService.setAllEventsChecked(this.isAllEventsChecked);
  // 跳转路由
  this.router.navigate(['/main/all_events_acted0/']);
}

组件2 修改代码 #

HTML部分：

<div class="row col s12">
  <div class="input-field col s1">
    <p>Sort:</p>
  </div>
  <div class="input-field col s2">
    <mat-checkbox class="example-margin" 
                  [(ngModel)]="isAllEventsBy0Checked"
                  (change)="handleAllEvents0Change()">
      Get All events by 0:
    </mat-checkbox>
  </div>
</div>
<hr>
<div *ngFor="let item of getalleventsby0">
  {{item.id_events}} {{item.name_events}} {{item.type_events}}
</div>

TS部分：

import { Router } from '@angular/router';
import { CheckboxStateService } from './checkbox-state.service';
import { FormsModule } from '@angular/forms';

// ...
isAllEventsBy0Checked = false;

constructor(private router: Router, private stateService: CheckboxStateService) {}

ngOnInit() {
  this.getalleventsby0 = this.service.getData();
  // 订阅服务状态，设置复选框初始值
  this.stateService.getAllEventsBy0Checked().subscribe(state => {
    this.isAllEventsBy0Checked = state;
  });
}

public handleAllEvents0Change() {
  this.stateService.setAllEventsBy0Checked(this.isAllEventsBy0Checked);
  this.router.navigate(['/main/getallevents0/']);
}

关键注意点： #

1. 一定要导入FormsModule到你的Angular模块中，否则[(ngModel)]无法生效。
2. 用(change)事件替代(click)：因为click事件会在复选框状态改变前触发，而change事件是状态改变后触发，能确保你获取到正确的选中状态。
3. 如果需要页面刷新后仍保持状态，可以在服务中结合localStorage来持久化状态（比如在setAllEventsChecked时把状态存到localStorage，初始化时从localStorage读取）。

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