angular - Angular 7 变更检测部分更新组件

Question

我最近在使用 Angular 7.1 时遇到了一些奇怪的更改检测问题，其中一些组件只是部分更新。

例如，我正在研究决策树。决策树组件确定哪个决策是当前的，然后将其传递给决策组件。这对第一个决策按预期工作，但在第二步它确实更新了问题，但决策组件中的绑定值没有更新。

决策树.component.ts

private tree: any[] = [
  {
    id: 'understand_story',
    question: 'Do you understand the intended functionality?',
    type: 'boolean',
    yes: [
      {
        action: 'go-to',
        params: {decision: 'is_story_possible'}
      }
    ],
    no: [
      {
        action: 'update-story',
        params: {blocked: true}
      }
    ]
  },
  {
    id: 'is_story_possible',
    question: 'Is this feature going to be possible?',
    type: 'boolean',
    yes: [
      {
        action: 'go-to',
        params: {decision: 'estimate_story'}
      }
    ],
    no: [
      {
        action: 'update-story',
        params: {blocked: true}
      }
    ]
  },
  {
    id: 'estimate_story',
    question: 'Enter an estimate to complete this story',
    input: 'estimate',
    type: 'text',
    change: [
      {
        action: 'input-value',
        params: {field: 'estimate'}
      },
      {
        action: 'move-story',
        params: {board: 'develop'}
      }
    ]
  }
];

private index = 'understand_story';

get currentDecision() {
  return this.tree.find(d => d.id === this.index);
}

makeDecision(answer) {
  this.decisions.push(answer);
  const decision = this.tree.find(d => d.id === answer.id);

  switch (decision.type) {
    case 'boolean':
      const actions = answer.answer ? decision.yes : decision.no;
      this.processActions(actions);
      break;
    case 'input':
      const actions = answer.change;
      this.processActions(actions);
      break;
  }
}

processActions(actions) {
  actions.forEach(action => {
    switch (action.action) {
      case 'go-to':
        this.index = action.params.decision;
        break;
    }
  });
}

决策树.component.html

<app-decision [decision]="currentDecision" (complete)="makeDecision($event)"></app-decision>

当当前决策索引更新时，问题会按预期更新，但边界值不会。这些值是decision.component.ts文件的私有属性，因此看起来 angular 正在回收组件实例。

决策组件.ts

@Input() decision;
@Input() disabled: boolean;
@Input() data;
@Output() complete: EventEmitter<any> = new EventEmitter();

private answer = null;
private comment: string;

决定.component.html

<div class="decision">
  <p class="question">{{decision.question}}</p>
  <div class="answer">
    <mat-radio-group aria-label="Select an option" [(ngModel)]="answer" [disabled]="disabled">
      <mat-radio-button [value]="true">Yes</mat-radio-button>
      <mat-radio-button [value]="false">No</mat-radio-button>
    </mat-radio-group>
    <mat-form-field appearance="outline">
      <textarea matInput placeholder="Add a comment" [(ngModel)]="comment" [disabled]="disabled"></textarea>
    </mat-form-field>
    <button *ngIf="! disabled" mat-flat-button color="primary" (click)="completeDecision()" [disabled]="! valid">Go to next step</button>
  </div>
</div>

以下是该问题的快速截屏视频：https ://www.loom.com/share/301dad2b15294f73892db0788d43b337

标签： angular