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 обновить страницу на маршрутизаторе .navigate?

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

Вот доказательство: введите описание изображения здесь

Ответы

Ответ 1

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

<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>

Будет работать во всех трех браузерах.

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

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

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

Ответ 2

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