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

Question

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

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

Is Angular2 предположительно до обновить страницу на маршрутизаторе.навигации?

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

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

Answer 1

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

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

И функция сохранения нечто вроде

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

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

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

Это предпочитали всегда устанавливать type при использовании button элемента See here:

поэтому изменение 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> 

Answer 2

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

Answer 3

Для меня работает хорошо (от компонентного кода):

window.location.href = "/sth"; 

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

Answer 4

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

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

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

Answer 5

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

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

Он будет загружать и перенаправлять страницу пользователя.