从另一个更新道具

Question

我有一个组件A，它显示项目集合。我的组件B带有过滤器（搜索栏，收音机），因此不应该更新组件A中的项目。当我从组件B登录this.componentA.items时，我看到的是数据，但在视觉上什么也没发生。

这是我所拥有的：

// ComponentA.ts
imports {} from '...'
@Component({...})
export class ComponentA implements OnInit {

  public items: Item[];

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.itemService.getItems().subscribe(items => {
      this.items = items.map( item => new Item().deserialize(item));
    })
  }
}

// ComponentB.ts
imports {} from '...'
@Component({...})
export class ComponentB implements OnInit {

  constructor(private componentA: ComponentA, private itemService: ItemService) {}

  setItems(items: Item[]): void {
    this.componentA.items = items;
  }

  onCategoryChange(category: string): void {
    this.itemService.getItemsByCategory(category).subscribe( items => {
      this.setItems( items.map( item => new Item().deserialize(item) ))
    }
  }
}

Answer 1

您从“ itemService”的Observable获取项目。

我会通知itemService有关过滤器的信息，因为它会更改数据并通知所有订阅者。

因此，服务是数据的王者。 组件A（显示数据）仅显示数据，无论数据如何。愚蠢的组件是一个很好的组件。 组件B（过滤器）仅将有关过滤事件的信息告知服务。

或多或少的两个哑组件和一个带有一点业务（过滤）逻辑的服务。 这样的结构很容易被UnitTests覆盖。

热烈的问候

Answer 2

为获得此数据，我向组件B提供了组件A的引用。

<componentB [componentA]='compA'></componentB>
<componentA #compA></componentA>

和

// componentB
...
@Input() componentA: ComponentA;
...