在 Angular 6 中重新加载组件的最佳方法

Question

在我的应用程序中，我有一个不同“问题”的列表，每个问题指的是由变量QuestionIndex控制的两个组件之一，该变量基本上采用列表中的当前 object。

所以我有Component A ，其中有一个带有两个单选按钮的表单：

<form [formGroup]="form">
  <label>
    <span class="inlineBlock">
      <input type="radio" value="Ja" formControlName="response" class="radioInput">
      <span class="labelSpan">Ja</span>
    </span>
  </label>
  <label>
    <span class="inlineBlock">
    <input type="radio" value="Nej" formControlName="response" class="radioInput">
    <span class="labelSpan">Nej</span>
    </span>
  </label>

</form>

我填写表格并增加QuestionIndex 。

然后该组件内部的表单不会重新加载，而是已经填写。

如何确保component完全重新加载？

我已经尝试过使用ngOnChanges但这不会真正起作用，因为我需要重置很多值，并且每次重置都会再次触发ngOnChanges 。

它是如何使用的

下面是当索引增加时组件的使用方式， currentQuestion object 被更改，因此component被加载

<app-radio-question [text]="currentQuestion.text"
                    *ngIf="currentQuestion.type == 'RadioQuestion' && !showEndQuestion"
                    [title]="currentQuestion.title" [NoOptionText]="currentQuestion.noOption"
                    [YesOptionText]="currentQuestion.yesOption"
                    [cacheData]="cacheData"
                    (formChangedEvent)="OnQuestionResponse($event)"></app-radio-question>

但是，此组件已更改但未更新，这意味着如果我更改其中的值，则会收到ExpressionChangedAfterItHasBeenCheckedError错误。

Answer 1

此输入根本不绑定到任何变量。 您应该考虑这样做并重置该特定变量

HTML

    <input [(ngModel)]="inputVariableName" (change)="onChangeFunc()" value="true" formControlName="response" class="radioInput"/>

TS

inputVariableName = false; // initial

onChangeFunc() {
    inputVariableName = false; //set it to initial again
}

但是您必须导入 FormsModule 才能使其正常工作。

Answer 2

我建议您为单选按钮使用某种框架。 我使用 Angular 材质，单选按钮分组如下：

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

一个完整的例子可以在这里找到Radio Button Angular Material 。