Перезагрузка той же страницы в Angular 4/5 и TypeScript

Я разрабатываю одностраничное приложение с помощью маршрутов:

this.router.navigate(['/customer-home'], { skipLocationChange: true });

Когда я нахожусь на странице выше, я добавляю клиента с помощью вызова REST. После обновления клиента я хочу, чтобы моя страница обновилась и перезагрузила вид страницы /customer-home.

Мой метод выглядит следующим образом:

  addNewCustomer(customer) {
    this.dataService.postEntity('customers', customer);
    location.reload();
  }

Проблема в том, что location.reload обновляет страницу и перенаправляет на домашнюю страницу.

Я сделал журнал консоли для местоположения:

Location {replace: ƒ, assign: ƒ, href: "http://localhost:4200/", ancestorOrigins: DOMStringList, origin: "http://localhost:4200", …}

Есть ли способ перезагрузить свою страницу и данные, используя маршруты, и я не хочу показывать URL-адрес в адресной строке.

PS Я уже пытался перенаправить на какой-то другой компонент, а затем вернуться к текущему компоненту, но он не перезагружает данные и не показывает последнего добавленного клиента.


typescript angular routes routing angular4-router
person abhinav3414    schedule 31.03.2018    source источник
comment
Вероятно, это связано с тем, что история навигации не видит изменения маршрута, потому что skipLocationChange: true. Зачем ты это делаешь? Почему вы пытаетесь перезагрузить страницу?   -  person Daniel W Strimpel    schedule 01.04.2018
comment
Да, в самом деле. Чтобы получить последние изменения, я делал это. Теперь я получил решение в комментариях, чтобы получить обещание на публикацию и добавить объект в текущий массив.   -  person abhinav3414    schedule 01.04.2018

Ответы (2)


arrow_upward
3
arrow_downward

Использование Location.reload в одностраничном приложении делает противоположное тому, что намерен делать SPA.

Кажется, вы пытаетесь перезагрузить страницу для получения новых данных с вашего сервера.

Загрузка данных не должна быть задачей маршрутизатора. Вместо перезагрузки страницы вы должны запросить данные после вставки или при обратном вызове вашего метода postEntity.

Хотя лучше, чем снова запрашивать данные, вы должны просто добавить Entity в массив последних добавленных клиентов или что-то еще, что вы используете для хранения данных.

person Gustavo Lopes    schedule 31.03.2018

arrow_upward
3
arrow_downward

Вы можете использовать службу маршрутизатора для перенаправления / перезагрузки на страницу вашего клиента, если это то, что вы хотите сделать по какой-то причине.

addNewCustomer(customer) {
    this.dataService.postEntity('customers', customer);
    this.router.navigate(['/customer-home']);
}

Но я бы предложил принять предложения всех остальных и использовать Observables или Promises для перезагрузки ваших данных вместо всей страницы. Observable должен выглядеть примерно так, как показано ниже, и я бы предложил, чтобы ваш метод Post возвращал клиента после его обновления.

addNewCustomer(customer) {
    this.dataService
        .postEntity('customers', customer)
        .subscribe(
            update => this.customer = update;
            err => console.log(err); 
        )
}
person Nolan Walker    schedule 01.04.2018