Получить локальный IP на angular2 component.ts

Question

У меня есть веб-приложение и API внутри малинового PI. Веб-приложение использует запросы HTTP GET к API для отображения своего контента.

Теперь в компоненте веб-приложения:

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'];
        })
    }
}

Это работает, когда я открываю веб-приложение в браузере внутри малины. Однако при открытии веб-приложения с другого устройства с использованием IP-адреса raspberry и порта, на котором запущено приложение, я не могу получить данные из API.

Я предполагаю, что это из-за 'localhost', и как только этот рашпиль НЕ МОЖЕТ БЫТЬ УСТАНОВЛЕН СТАТИЧЕСКИМ 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-адрес вручную в код, он работает, хотя это было только для проверки, я не хочу вводить его вручную.

Answer 1

Вы можете получить origin от window.location.origin, Для более подробной информации проверьте здесь

 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'];
    })
}