我在标签之间切换时如何不重置表单

Question

我有两个bootstrap选项卡和两个表单。我想在它们之间切换时不重置表单。这些形式是单独的组件，因此它们被销毁是很自然的。我该如何改变这种行为？

父组件

 <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并且仍然填写表单。

Answer 1

正如您所说，它们是独立的组件，在切换选项卡时会被销毁，这是有效且有意义的。

正确的方法是维持组件外的状态，即将状态存储到服务中。

然后，您可以随时使用该服务在导航回来时在test1中恢复您的表单。我还建议你阅读一下Container Vs Presentation组件。

好的链接：

https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

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