将数据传递给 Angular 中的其他页面/组件

Posted 2023-03-13

【中文标题】将数据传递给 Angular 中的其他页面/组件

【英文标题】：Pass data to other page/component in Angular

【发布时间】：2018-12-11 09:59:40

【问题描述】：

我的 html 文件中有如下用户输入：

<div class="form-group col-md-4">
  <label for="btsIp"><strong>BTS IP:</strong></label> <input ngModel type="text"
    name="btsIp" class="form-control" id="btsIp" (blur)="onChange()" [(ngModel)]="btsIp">
</div>

在我的component.ts 中，我将其用作 btsIp: any 并在我的请求中传递它

let Data = 
  "btsIp": this.btsIp

这工作正常。但我想将这个btsIp 值传递给另一个page/Component，在那里我需要再次调用一个请求，我需要传递相同的btsIp 值。

大家可以帮忙吗？

【问题讨论】：

使用共享服务angular.io/guide/singleton-services

参考这个：Communication between two components in angular

【参考方案1】：

将数据传递给其他页面/组件，取决于它是父组件、兄弟组件还是完全不相关的组件在不同的路由中。

父组件：可以通过挂钩子组件的@Output来触发父组件功能。或者您可以通过@ViewChild 声明访问子组件的属性。阅读更多：https://angular.io/guide/component-interaction 同级组件：先按上述方法传递给父组件，然后通过子组件的@Input将数据从父组件传递到子组件。 不同路由中的完全不同页面：您可以通过路由参数传递数据。阅读更多：https://angular.io/guide/router

其他方法：如果您负担得起使用 NgRx（受 Redux 启发的状态管理，由 RxJs for Angular 提供支持），一旦您掌握了它，一切都会变得容易得多，但这是一个巨大的其他主题，不能包含在此答案框中。更多https://github.com/ngrx/platform

【参考方案2】：

创建一个新的 ts 文件，将其注入到你的模块中，使用 get 和 set

  get IP ()
    return this.btsIp;
  

  set IP (btsIp)
    this.btsIp= btsIp;
  

希望对你有帮助

【讨论】：

这可能有效，但它不是 Angular 的方式。顺便说一句，这种方法太奇怪了。有多对父母和孩子怎么样，这行不通。