Как не сбрасывать форму при переключении между вкладками - PullRequest
Новая
       30

Как не сбрасывать форму при переключении между вкладками

0 голосов
/ 21 марта 2019

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

родительский компонент 

 <div>
    <div class="row">
      <div class="col-lg-12">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link"
               routerLinkActive="active"
               [routerLink]="['test1']">Test1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"
               routerLinkActive="active"
               [routerLink]="['test2']">Test2</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
  </div>
</div>

test1 дочерний компонент 

<form>
 ....
</form>

тест 2, дочерний компонент 

<form>
  ...
</form>

Итак, я хотел бы иметь возможность заполнить форму в компоненте test1, затем переключиться на test2, вернуться к test1 и все еще заполнить форму здесь.

1 Ответ

1 голос
/ 21 марта 2019

Как вы правильно сказали, они являются отдельными компонентами и будут уничтожены при переключении между вкладками, что эффективно и имеет смысл.

Правильный подход - поддерживать состояние вне компонента т.е. сохранить состояние для службы.

Тогда вы всегда можете использовать сервис для восстановления формы в test1 при переходе назад. Я бы также посоветовал немного прочитать о компонентах Container Vs Presentation.

Хорошие ссылки:

https://blog.angular -university.io / угловая-2-смарт-компонента-противы-презентации-компонента-Что-разностное-когда в использовании-каждый-и-почему /

https://blog.angularindepth.com/container-components-with-angular-11e4200f8df

...