Question

我里面有两个引导程序选项卡和两种形式。当我在表格之间切换时，我不想重置表格。这些形式位于单独的组件中，因此很自然地将其销毁。如何更改此行为？

父组件

 <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

正如您正确地说的那样，它们是独立的组件，在选项卡之间切换时会被破坏，这是有效且有意义的。

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

然后，您随时可以在返回时使用该服务在nome中还原表单。我还建议您稍微阅读一下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

在选项卡之间切换时如何不重设表单

1 个答案: