Question

我想在我的项目中使用mat-checkbox来进入另一个组件。现在的问题是，当我点击mat-checkbox时这不会保持选中状态，只能进入另一页。

我尝试了这段代码。

组件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" (click)="getallevents()">Get all events:</mat-checkbox>
    </div>
  </div>
<hr>
  <div ngFor="let item of events">
     {{item.id}}
     {{item.name}}
  </div>

Ts代码：

 ngOnInit() {
    this.events= this.service.getData();
  }
  public getallevents() {
    this.router.navigate(['/main/all_events_acted0/']);
  }

COMPONENT2：

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" (click)="getallevents0()">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代码：

 ngOnInit() {
    this.getalleventsby0= this.service.getData();
  }
  public getallevents0() {
    this.router.navigate(['/main/getallevents0/']);
  }

当我点击复选框时，我想进入另一个组件，我也希望保持选中此复选框。请问任何想法？

Answer 1

当您导航到新组件时，第一个组件（具有复选框）将被销毁，因此状态将丢失。

一种可能的解决方案是使用中央状态管理器（即redux），以便即使在离开组件后也可以存储复选框的状态。

更轻量级的解决方案是创建一个服务，只存储该组件的状态。

如何使用mat-checkbox进入另一个组件

1 个答案: