Question

我有一个ObjectComponent类，它包含一些数据：

@Injectable()
export class ObjectComponent{
data: any;
....
...
}

我有另一个Component ObjectViewComponent：

export class ObjectViewComponent{
    data: any;

constructor(
  @Inject(forwardRef(() => ProposalComponent)) public parentObject:ProposalComponent)
  {
    this.data=this.parentObject.data;
  }

如您所见，我想从父组件访问数据（因为它们是从另一台服务器加载的，我想避免2个http请求）。由于ObjectViewComponent是使用路由器功能创建的，因此无法使用Input将数据从父级传递给子级。

到目前为止，这一切都正常，但ObjectViewComponent和ObjectComponent中的数据之间没有双向绑定。因此，每当我更改ObjectViewComponent中的数据时，它都不会更改ObjectComponent中的数据，反之亦然。任何想法如何实现两个组件之间的双向绑定？我对Angular不是很熟悉 - 我在服务等方面做了一点点但是在这个例子中我没能实现双向绑定。我还检查了stackoverflow，没有一个例子对我有效。

谢谢，迈克尔

Answer 1

首先创建一个服务并在那里获取数据，比如在service.ts文件中，然后根据该数据创建一个主题。

    data:CustomClass;
    dataSubject = new BehaviorSubject(data);
    fetchData(){
      //////fetch the data
      setData(fetchedData)
    }

    setData(data){
      this.data = data;
      dataSubject.next(data)
    }

现在，您希望收到通知的所有组件，请将主题订阅为

this.service.dataSubject.subscribe({
                next: (data) => {
                    /////this will be called 1. on first subscribe 2. on subsequent calls to setData() method in service;
                }
            })

我希望这会对你有所帮助

无输入的Angular中的双向绑定

1 个答案: