获取angular2 component.ts上的本地IP

时间:2017-11-09 17:59:03

标签: angular web ip

我在覆盆子PI中有一个网络应用和API。 Web应用程序使用HTTP GET请求到API以显示其内容

现在,在网络应用内部组件.ts:

export class AppComponent implements OnInit {

    results = {};

    constructor(private http: HttpClient) {}
    ngOnInit(): void {

        var url = 'http://localhost:8000/api/';
        var endpoint = 'test/';

        this.http.get(url + endpoint).subscribe(data => {
          this.results = data['test'];
        })
    }
}

当我在覆盆子内的浏览器上打开Web应用程序时,此功能正常。 但是,当使用raspberry的IP和应用程序正在运行的端口从其他设备打开Web应用程序时,我无法从API获取数据。

我认为这是因为'localhost',并且一旦这个锉刀不能用STATIC IP设置我想要检索它的本地IP,做类似的东西:

    ngOnInit(): void {

        var ip = <some code <-- HELP>
        var url = 'http://' + ip + ':8000/api/';
        var endpoint = 'test/';

        this.http.get(url + endpoint).subscribe(data => {
          this.results = data['test'];
        })
    }

我已经测试过,如果我手动将IP放在代码中,虽然它只是用于测试,但我不想手动输入。

1 个答案:

答案 0 :(得分:10)

您可以origin获取window.location.origin。有关详细信息,请查看here

 ngOnInit(): void {

    var ip = window.location.origin // this will give you the ip:port
    //if you just want the ip or hostname you can use window.location.hostname
    var url =  ip + '/api/';
    var endpoint = 'test/';

    this.http.get(url + endpoint).subscribe(data => {
      this.results = data['test'];
    })
}