Question

我有两个嵌套组件：grid-container和grid-component。

在grid-container中，grid-component初始化如下：

<grid [title]="'This is the grid title'" [data]="data"></grid>

数据已初始化。使用事件，可以在data中获取grid-component中更新的grid-container。这对我来说很明显。但是，我们通常应该在angular 2中从容器组件（data）更新嵌套组件（本例中为grid-component）中的grid-container？

更具体地说，（或作为说明）我需要一个在容器组件（grid-container）中添加项目的函数，该项目将应用于data中的grid-component

ps：它不是in this question的双向数据绑定，也不能解决这个问题。

修改

export class GridComponent{ //child component
  @Input() data:any;
}

import { GridComponent } from 'somewhere';
export class GridContainer{ //parent component
  data:any = [{/*an initialized object which is visible in child component*/}]

  addItem(){
    data.push({/*an item is added*/};
    //PROBLEM IS THE NEWLY ADDED ITEM IS NOT VISIBLE IN GridComponent class.
  }
}

Answer 1

有点晚了，但也许如果有人到这里会看到解决方案。我认为最好的解决方案是service，它提供了简单明了的数据传递方式。在您的情况下，孩子应该subscribe和observable，并且在父组件中，您应该使用服务方法在您想要更新子组件中的数据时传递数据。以下示例。另请查看angular 2 cookbook

父组件

export class GridContainer {
   constructor(private GridService: GridService) {  }
   private data: any[] = [];
   private addItem(el) {
      this.data.push(el);
      this.GridService.pushGridData(this.data);
   }
}

子组件

export class GridComponent implements OnInit, OnDestroy {
   constructor(private GridService: GridService) {  }
   private data: any[] = [];
   private subscribtion: Subscribtion;
   ngOnInit(): void {
      this.Subscribtion = this.GridService.gridData.subscribe(
         (data) => { this.data = data; }
      )
   }
   ngOnDestroy(): void {
      this.Subscribtion.unsubscribe();
   }
}

<强>服务

@Injectable();
export class GridService {
   constructor() {  }

   private gridDataSource = new Subject<any[]>()

   gridData = this.gridDataSource.asObservable();

   pushGridData(data) {
      this.gridDataSource.next(data);
   }
}

Answer 2

你的问题不明确。请提供您的HTML示例。如果你有父子关系，那么它是2路数据绑定。

@Component({
    template:`
        <grid-component>
            <grid-component [(data)]="gridData"></grid-component>
            <input type="button" label="Update Parent" (click)="updateData()" />
            <label>{{gridData.someCounter}}</label>
        </grid>
    `
})
class GridComponent{
    gridData: any = {
        someCounter = 1;
    };

    updateData() {
        this.gridData.someCounter++;
    }
}

@Component({
    template:`
        <input type="button" label="Update Child" (click)="updateData()" />
        <label>data.someCounter</label>
    `
})
class GridContainerComponent{
    @Input() data: any;
    @Output() dataChange = new EventEmitter();

    //You must trigger this method from GridContainer somehow. E.g. on button click
    updateData() {
        this.data.someCounter++;
        //this row is the most important, and you have to call it manually each time you want to prompt new value to parent. 
        //I.e. in another place you can update 'this.data' but do not update that value in Parent just skipping this line.
        this.dataChange.emit(this.data);
    }
}

如果您有2个兄弟姐妹，那么它仍然是2路数据绑定，其中Parent充当代理：

<grid>
    <grid-component [(dataChild1)]="dataParent"></grid-component>
    <grid-container [(dataChild2)]="dataParent"></grid-container>
</grid>

或者您可以使用服务Sibling Component Communication

Angular2从父组件更新嵌套组件中的数据的方法

2 个答案: