我正在实现一项功能，该功能在右侧显示层次结构中的所选项目。

切片.组件.ts：

 import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
    import * as API from '../../shared/api-routes';
    import { DataService } from '../../shared/service/data.service';
    import { TreeNode } from '../../shared/dto/TreeNode';
    import { Subject } from 'rxjs/Subject';

    import html from './slice.component.html';
    import css from './slice.component.css';

    @Component({
      selector: 'slice-component',
      template: html,
      providers: [DataService],
      styles: [css],
      changeDetection: ChangeDetectionStrategy.OnPush
    })

    export class SliceComponent {
      selections: TreeNode<string>[] = [];
      newList: TreeNode<string>[];

      constructor(dataService:DataService, cd:ChangeDetectorRef) {
        super(dataService, cd);
      }

      public onSliceChange(event:TreeNode<string>):void {
        if(event.selected) {
          this.selections.push(event);
        }
        else {
          var index = this.selections.indexOf(event);
          if(index > -1) {
            this.selections.splice(index, 1);
          }
        }
        this.newList = this.selections.slice();
      }

    }

slice.component.html ：

<p>Slices</p>
<mat-input-container>
  <input #searchInput matInput placeholder="Search for Slices">
</mat-input-container>
<div class="flex-container">
<div class="SliceCheck" *ngIf="isDataLoaded">
  <fortune-select
     (sliceSelected)="onSliceChange($event)">
  </fortune-select>
</div>
<div class="sendToRight">
    <rightside-component
      [sliceTreeNode]="newList">
    </rightside-component>
</div>
</div>

rightside.component.ts ：

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TreeNode } from '../../shared/dto/TreeNode';

import html from './rightside.component.html';
import css from './rightside.component.css';

@Component({
  selector: 'rightside-component',
  template: html,
  providers: [DataService],
  styles: [css],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RightSideComponent {
  @Input() sliceTreeNode: TreeNode<string>[];

  constructor(private cd: ChangeDetectorRef) {}

  getSlices() : TreeNode<string>[] {
    if (typeof(this.sliceTreeNode) == "undefined" || (this.sliceTreeNode) === null) {
      return [];
    }
    return this.sliceTreeNode;
  }

  deselect(item: TreeNode<string>): void {
    if((item.children) !== null) {
      item.children.forEach(element => {
        this.deselect(element);
      });
    }
    var index = this.sliceTreeNode.indexOf(item);
    if(index > -1) {
      this.sliceTreeNode.splice(index, 1);
    }
    item.selected = false;
  }

}

rightside.component.html ：

  <ul class="selection-list" >
    <li *ngFor="let item of getSlices()">
      <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ul>

在我的实现中，一切都按预期进行，直到发生以下情况：

您从右侧列表中删除一个项目，它会从层次结构中正确取消选择。但是，当您从层次结构中再次选择它时，它现在会在侧视图列表中显示两次。

不知何故，当再次选择先前已取消选择的节点时，右侧组件中的列表实例不会更新。

有关如何解决此问题的任何意见？这与我在网上找到的plunkr类似：http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT? p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

解决方案

最可能的问题是您在 SliceComponentChangeDetectionStrategy.OnPush内使用和执行突变，onSliceChange而没有显式调用cd.markForCheck().

changeDetection: ChangeDetectionStrategy.OnPush从 SliceComponent 中删除或cd.markForCheck()添加到onSliceChange

当您将更改检测设置为 OnPush 时，Angular 仅保证当传递给其输入的引用发生更改时组件将被更新。onSliceChange不会替换任何输入，因此切片组件不会被更新。

You should also consider replacing deselect in RightSideComponent with an Output and handling the changes in SliceComponent. The convention of one-way data flow is to only modify common state in the common parent. This prevents conflicts when two components both want to modify some shared state.