Angular2 router.navigate страница обновления

Вот как выглядят маршруты и компоненты:

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

новый user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Angular2 долженобновить страницу на router.navigate?

Что еще использовать вместо router.navigate, чтобы избежать обновления страницы?

Вот доказательство:

 Günter Zöchbauer30 июн. 2016 г., 13:21
Вот с чем ссылка в моем первом комментарии должна помочь ;-)
 Cristian Muscalu30 июн. 2016 г., 13:16
Пожалуйста, прости меня за невежество, но я не могу найти ни одного плункера, работающего с установленным маршрутизатором RC3, и я никогда раньше не делал ни одного плункера. У вас есть тот, который я могу редактировать?
 Günter Zöchbauer30 июн. 2016 г., 12:48
Нет, это не так. Вы можете воспроизвести в Plunker?angular.io/resources/live-examples/quickstart/ts/plnkr.html
 Günter Zöchbauer30 июн. 2016 г., 13:03
По крайней мере, мы можем изучить полный код и проверить, если что-то не так.
 Cristian Muscalu30 июн. 2016 г., 13:02
Наверное, нет, если это не должно так себя вести, но я попробую.

Ответы на вопрос(5)

У меня хорошо работает (из кода компонента):

window.location.href = "/sth";

он автоматически перезагружает страницу в заданную часть URL.

Решение Вопроса

Вы, вероятно, звонитеrouter.navigate Функция внутри события клика.

<button class="btn btn-default"
    (click)="save()">Save</button>

И функция сохранения была чем-то вроде

save() {
    //Do stuff
    this._router.navigate(['/users', { id: userId } ]);
}

Это работает в браузерах IE11 и Edge, но перезагрузит приложение в Chrome.

Это из-за отсутствияtype в элементе кнопки, если кнопка находится внутри<form></form> Chrome будет использовать «submit» в качестве значения по умолчанию. Причиной отправки формы при нажатии кнопки.

Желательно всегда устанавливатьtype при использованииbutton элементПосмотреть здесь:

Таким образом, изменение HTML на

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

Будет ли это работать на всех 3 браузерах.

Мое предыдущее решение также работает, (возвращая false, это предотвратило бы действие по умолчанию. A.k.a. отправка формы), но я думаю, что вышеупомянутое предпочтение.

Устаревший ответ, но оставленный для потомков:

<button class="btn btn-default"
        (click)="save(); false">Save</button>
 cgatian17 нояб. 2016 г., 13:39
Я хочу плакать..
 Cristian Muscalu01 июл. 2016 г., 14:16
Освежение окончено! Но я не могу точно сказать, что делает «ложь», и какие проблемы это может вызвать в будущем. Я покажу ему еще несколько тестов. Спасибо!
 faruk23 дек. 2017 г., 05:19
офигенный ответ!
 ElSnakeO01 июл. 2016 г., 15:08
@Cris Я обновил свой ответ, предложив лучшее решение и немного больше объяснений.
 ayyappa maddi15 мар. 2017 г., 14:09
В моем случае компонент перезагружается. Пример: - Первоначально я нахожусь в маршруте-1 и изменен на маршрут-2, если я вернусь к маршруту 1. то, что компонент route1 перезагружается снова (конструктор вызывается) - это ожидаемое поведение
 DS_web_developer18 окт. 2016 г., 11:45
хм, для меня добавление ложных работ также, но я бы предпочел сделать это с типом ... но не иметь кнопок, но обычные ссылки ... и type = "button" на обычных ссылках, кажется, не делает трюк
 Cristian Muscalu01 июл. 2016 г., 15:22
Оба решения работают хорошо, но предложенное вами имеет больше смысла. Так что, если я хорошо понимаю, суть в том ... никогда не используйтеbutton type="submit" в спа? :-D
 Johannes19 сент. 2016 г., 14:36
Большое спасибо. Я пытался исправить это с помощью event.preventDefault (), но это решение намного лучше.
 No one04 февр. 2017 г., 21:00
Ты спас мой день. Работает нормально.
 gayan199127 нояб. 2016 г., 09:43
У меня это тоже сработало .. спасибо
 Vitali Kniazeu12 июл. 2016 г., 21:37
Прекрасное объяснение! Спасибо! Я боролся с этим вопросом сегодня весь день, пока не увидел это.

Это покрывает AngularJS / Angular гибридную ситуацию. Я добавляю ответ, потому что этот вопрос является одним из лучших результатов при перезагрузке страницы углового маршрутизатора Google. Надеюсь, это сэкономит кому-то еще время.

В моем случае у меня была очень простая конфигурация маршрута Angular 2 (фактически 5), которая в основном работала, за исключением одного случая, когда ссылка с одного маршрута на другой по необъяснимым причинам вызывала перезагрузку страницы. Я проверил всех обычных подозреваемых, форму, кнопку отправки и т. Д.

Оказалось, что где-то вAngularJS Компонент, который отображался во время нажатия на ссылку, былng-include, Документация предупреждает об этом по причине, которую я предполагаю. Перетасовал шаблон такng-include может быть изменен наtemplateUrl и все было хорошо.

с подробностями) с использованием простого<a href="/details/1"></a> ссылка на сайт. Решением было использовать угловую связь:<a [routerLink]="['/details', 1]"></a>

 ttugates01 сент. 2017 г., 19:09
[routerLink] действительно работает, в моем случае я должен был выполнить логику перед навигацией, поэтому [routerLink] не вариант.

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

window.open ('users', '_self');

Это перезагрузит и перенаправит на страницу пользователя.

Ваш ответ на вопрос