как использовать mat-checkbox для перехода в другой компонент - PullRequest
Новая
       17

как использовать mat-checkbox для перехода в другой компонент

0 голосов
/ 16 мая 2018

Я хочу использовать 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>

Ц Код: 

 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>

Код Тс: 

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

Когда я нажимаю флажок, я хочу перейти к другому компоненту, также я хочу остаться отмеченным этим флажком. Пожалуйста, есть идеи?

1 Ответ

0 голосов
/ 16 мая 2018

При переходе к новому компоненту первый (имеющий флажки) уничтожается, поэтому состояние теряется.

Возможное решение состоит в том, чтобы использовать центральный менеджер состояний (т. Е. redux ), чтобы вы могли сохранять состояние своего флажка даже после выхода из компонента.

Более легким решением является создание службы, которая хранит состояние только для этого компонента.

...