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

时间:2018-07-03 07:14:34

标签: javascript angular angular-routing angular-components

我在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值传递给另一个页面/组件,在这里我需要再次调用一个请求,在那里我需要传递相同的btsIp值。

请大家帮忙吗?

2 个答案:

答案 0 :(得分:2)

将数据传递到另一个页面/组件,这取决于它是父组件,同级组件还是其他路由中完全不相关的组件。

  • 父组件:您可以通过挂钩子组件的@Output来触发父组件的功能。或者,您可以通过@ViewChild声明访问子组件的属性。了解更多:https://angular.io/guide/component-interaction
  • 同级组件:如上所述,首先转移到父组件,然后通过子@Input将数据从父组件传递到子组件。
  • 在不同路径中的完全不同的页面:您可以通过路径参数传递数据。了解更多:https://angular.io/guide/router

其他方法:如果您可以负担得起使用NgRx(受RuxJs支持的Angux的Redux启发的状态管理),则一旦掌握它,一切都会变得容易得多,但这是一个巨大的其他主题,不能包含在此答案框中。 https://github.com/ngrx/platform

的更多内容

答案 1 :(得分:-1)

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

  get IP (){
    return this.btsIp;
  }

  set IP (btsIp){
    this.btsIp= btsIp;
  }

希望这会有所帮助