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

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

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

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

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

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 Я уже пробовал перенаправить на другой компонент, а затем вернуться к текущему компоненту, но он не перезагружает данные и не показывает последнего добавленного клиента. Помощь очень ценится.

2 ответа

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

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

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

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


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

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

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

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

licensed under cc by-sa 3.0 with attribution.