将值添加到父组件的列表 - Angular后，将值传递给子组件

Question

我正在研究小型Angular项目，我希望在将值添加到列表后将值从父级传递给子级，所以它是这样的：

new-component向the list-component发射物品

在将它添加到列表之后，让我们将它移动到qazxsw poi，这样我就可以看到最近添加的项目，以防我想编辑某些内容 -

一切正常，直到我想在view-component上看到它（它已成功添加到列表等）这里是我的代码：

在一个新的组件项上发出列表：

view-component

由于列表是父列表正在侦听此发射器。

onSubmit() {
    this._viewService.save(this.view)
      .subscribe(
        (data: View) => {
          this.onSave.emit(data);
        }
  }

发射后，它在<view-new #addNew (onSave)="onAdd($event)"></view-new> 方法中可用，直到这一部分一切正常：

onAdd

在我的列表上也是父组件，还包括显示组件，它需要显示有关最近添加的项目的信息：

onAdd(view: View) {
    this.receivedView = view;
    // And here I'm opening viewDisplay compnent which displaying info about recently addedd data
    this.viewDisplay.show();
}

当我通过调用 <view-display #displayView [view]="receivedView"></view-display> 打开这个组件时

this.viewDisplay.show();

这是显示组件的一部分是空的：

@Input() view: View;

show() {
    $('#' + this.id).modal('show');
    console.log("added - selected:view", this.view);
  }

哪个应该从父母填充添加方法并在这里传递是永远空的..我不知道如何..

多谢你们

干杯

Answer 1

您正在更新父级中的字段this.view，该父级绑定到子级中的recievedView字段。这种结合是通过角度变化检测机制完成的。在您的onAdd方法中，您尝试在更改检测完成之前同步调用view方法，并且由于此字段尚未更新。最简单的解决方案是将孩子的领域分配到位

viewDisplay.show()

但肯定有更好的选择取决于你的项目

Answer 2

Angular需要知道视图的值已经改变。你通常通过定义一个

onAdd(view: View) {
  this.receivedView = this.viewDisplay = view;
  this.viewDisplay.show();
}

来做到这一点。通过定义setter，可以跟踪对输入变量的更改。您还需要定义一个私有属性来保存值。

setter

您还可以通过qazxsw poi处理通信。