Question

父母：

<div id="join-container">
  <join-chain 
    id="my-join-chain" 
    [selectedColumn]="selectedColumn"
    (updatedStatements)=onUpdatedStatements($event)>
  </join-chain>
  <tile-canvas 
    id="my-tile-canvas" 
    [mystatements]="theStatements"
    (selectedColumn)="onSelectedColumn($event)">
  </tile-canvas>
</div>

父母的ts代码：

  onUpdatedStatements(statements: Relational.JoinStatement[]) {
    this.theStatements = statements;
    console.log(">> fired from step-joining")
    console.log(this.theStatements)
  }

孩子：

...
  mappings: Mapping[] = []
  @Input() set mystatements(someStatements: Relational.JoinStatement[] | undefined) {
    console.log(">> tile canvas interceptor")
    console.log(someStatements)
    if (someStatements !== undefined) {
      let idsFromStatements = someStatements
        .map(statement => [statement.leftTile, statement.rightTile])
        .filter(mapping => (mapping[0] !== undefined) && (mapping[1] !== undefined)) as ([Relational.tileId, Relational.tileId])[]
      this.mappings = idsFromStatements.map(ids => new Mapping(ids))
    }
  }

我在玩该应用程序时看到多次出现消息fired from step-joining。另一方面，>> tile canvas interceptor仅在第一个fired from step-joining之后发生一次。

我通读了几篇文章，并使用了类似的模式，即每次都触发“拦截器”。

Answer 1

在

onUpdatedStatements(statements: Relational.JoinStatement[]) {
this.theStatements = statements;
console.log(">> fired from step-joining")
console.log(this.theStatements)
}

如果语句具有与此相同的引用和值。则不会在子组件中触发语句onChange

数组-更改不会传播到子组件

1 个答案: