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

我有两个引导选项卡和两个表单在里面。 我不希望在表单之间切换时重置表单。 这些形式是在单独的组成部分，所以很自然，他们被摧毁。我怎样才能改变这种行为

父组件

 <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>

<form>
 ....
</form>

<form>
  ...
</form>

测试1


测试2

test1子组件

 <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>

<form>
 ....
</form>

<form>
  ...
</form>

....

测试2子组件

 <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>

<form>
 ....
</form>

<form>
  ...
</form>

...

---

所以，我希望能够在test1组件中填写表单，然后切换到test2，回到test1，并且仍然在这里填写表单。

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

正确的方法是在组件外部保持状态 i、 e.将状态存储到服务

然后，在返回时，您可以始终使用该服务在

test1

中还原表单。我还建议您阅读一些关于容器和表示组件的内容

好链接：

---

正如您正确地说的，它们是独立的组件，在标签之间切换时会被破坏，这是有效且有意义的

正确的方法是在组件外部保持状态 i、 e.将状态存储到服务

然后，在返回时，您可以始终使用该服务在

test1

中还原表单。我还建议您阅读一些关于容器和表示组件的内容

好链接：

---

使用服务共享组件上的数据，如下所述。您还可以将信息存储到localstorage或sessionstorage中。您还可以将信息存储到localstorage或sessionstorage中。