Question

在一行中很难说明问题，但这里有一个更详细的解释：

假设您有一个屏幕，您通过某些过滤器过滤火箭发射，让我们称之为F.过滤器可以是任何东西 - 单选按钮，输入字段或其他。您有一个“显示”按钮，可以在网格中呈现一些数据，具体取决于您对过滤器的设置。

在过滤器中，有一个“选择模型”按钮。

当您单击此选择模型按钮时，它会将您带到另一个屏幕，在该屏幕中您有另一组字段，例如可以确定火箭船模型的大功能。当您单击“确定”按钮时，它需要返回第一个功能并发送有关您选择的火箭船模型的数据。

如果还有另一个级别，当你选择火箭飞船模型时，你将不得不转移到另一个功能来选择火箭飞船了解到什么？

您如何在Angular中实现此功能？我应该使用路由器，弹出窗口还是别的什么？

Answer 1

在被另一个组件替换的组件之间传递数据，我假设有一个数据可以由多个组件读取和修改。为实现此目的，您可以在router，angular service，dependency injection和behavior subject的帮助下使用subscription。

首先，使用behaviorSubject属性创建angular service作为数据：

@Injectable()
export class DataService()
{
  public data: Subject<any> = new BehaviorSubject<any>(null);

  changeData(newData: any) {
    this.data.next(newData); // this will update the value of the `data` with `newData`, and any component which subscribe to `data` will get the updated value of `data`.
  }
}

当用户从组件跳转到其他组件时，可注入服务能够保留数据。下一步是将此服务注入需要数据的组件。我们需要ComponentA和ComponentB需要数据，例如：

@Component({
  selector: 'component-a'
  providers: [DataService],
  templateUrl: `component-a.html`
)}

export class ComponentA {
  constructor(private dataService: DataService) {
    this.dataService.data.subscribe((value) => {
      // here, component A able to always get the updated value of the data when its value is changed.
    });
  }
}

对于ComponentB，假设该组件能够替换（或更新）数据：

@Component({
  selector: 'component-b'
  providers: [DataService],
  templateUrl: `component-b.html`
)}

export class ComponentB {
  constructor(private dataService: DataService) {
    this.dataService.data.subscribe((value) => {
      // here, component B able to always get the updated value of the data when its value is changed.
    });
  }

  changeData(newData: any) {
    this.dataService.changeData(newData); // this call will update the value of the data which DataService keeps, therefore when user jump to ComponentA, ComponentA will retrieve the updated value from `this.dataService.data`'s subscription
  }
}

现在，当您使用路由器路由这两个组件时，每当用户导航到一个组件时，该组件将获得最新的数据值。

如何在被另一个组件替换的组件之间传递数据并返回Angular 2？

1 个答案: