从子组件调用父组件函数，从sessionstorage实时更新变量

xpcnnkqh 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(325)

代码以product变量中的初始值开始，该值被设置到sessionstorage中。当我触发侧面板（子组件）时，它从url中的参数接收product.name，然后该组件在sessionstorage中搜索并更新product.amount值（并将其设置为sessionstorage）。
我试图从子组件调用的父组件函数是getproductstatus（）；当我更新侧面板中的product.amount值时，我需要同时更新父组件中的product对象。这就是我一直在尝试的，提前谢谢。
代码：https://stackblitz.com/edit/angular-ivy-npo4z7?file=src%2fapp%2fapp.component.html

export class AppComponent {

  product: any;
  productReturned: any;

  constructor() {
    this.product = {
      name: 'foo',
      amount: 1
    };
  }

  ngOnInit() {
    this.getProductStatus();
  }

  getProductStatus(): void {
    this.productReturned = this.getStorage();
    if (this.productReturned) {
      this.product = JSON.parse(this.productReturned);
    } else {
      this.setStorage();
    }
  }

  setStorage(): void {
    sessionStorage.setItem(this.product.name, JSON.stringify(this.product));
  }

  getStorage() {
    return sessionStorage.getItem(this.product.name);
  }

  reset() {
    sessionStorage.clear();
    window.location.reload();
  }
}

JavaScript Angular

来源：https://stackoverflow.com/questions/68324011/angular-call-parent-component-function-from-child-component-update-variable-in

1条答案

按热度按时间

6psbrbz91#

在这种情况下，有两个数据共享选项。如果您只需要父组件中的数据：
在child.component.ts中：

@Output() someEvent = new EventEmitter

someFunction(): void {
  this.someEvent.emit('Some data...')
}

在父模板中：

<app-child (someEvent)="handleSomeEvent($event)"></app-child>

在parent.component.ts中：

handleSomeEvent(event: any): void {
  // Do something (with the event data) or call any functions in the component
}

如果您可能还需要另一个组件中的数据，则可以将服务绑定到应用程序的根，并在应用程序中的任何不相关组件中创建subscibe to主题。
服务：

@Injectable()
export class DataService {

  private dataSource = new BehaviorSubject<SnapshotSelection>(new Data());
  data = this.dataSource.asObservable();

  constructor() { }

  updatedDataSelection(data: Data){
    this.dataSource.next(data);
  }

}

只需在接收组件和传出组件的构造函数中传递服务。
在接收端的ngoninit（）中：

dataService.data.subscribe(data => {
  // Do something when data changes
})

然后只需在发生更改的地方使用updateDataSelection（）。
我在这里记录了组件之间所有类型的数据共享：
https://github.com/h3ar7b3a7/earlyangularprojects/tree/master/datasharing

赞(0）回复(0）举报 2021-09-23

我来回答

从子组件调用父组件函数，从sessionstorage实时更新变量

1条答案

相关问题

热门标签

最新问答