Я работаю над проектом Angular. Я борюсь с обновлением в компоненте.
Я хочу обновить компоненты маршрутизатора при нажатии кнопки. У меня есть кнопка обновления, когда я нажимаю на нее, чтобы компонент/маршрутизатор нуждался в обновлении.
Я попробовал window.location.reload()
и location.reload()
эти два не подходят для моей потребности. Пожалуйста, помогите, если кто-нибудь знает об этом.
Как обновить компонент в угловом
Ответ 1
После некоторого исследования и изменения моего кода, как показано ниже, скрипт работал для меня. Я только что добавил условие:
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
this.router.navigate(['Your actualComponent']);
});
Ответ 2
Используйте this.ngOnInit(); для перезагрузки одного и того же компонента вместо перезагрузки всей страницы!
DeleteEmployee(id:number)
{
this.employeeService.deleteEmployee(id)
.subscribe(
(data) =>{
console.log(data);
this.ngOnInit();
}),
err => {
console.log("Error");
}
}
Ответ 3
Добавление этого кода в требуемый конструктор компонента сработало для меня.
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.mySubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Trick the Router into believing it last link wasn't previously loaded
this.router.navigated = false;
}
});
Не забудьте unsubscribe
от этой mySubscription в ngOnDestroy()
.
ngOnDestroy() {
if (this.mySubscription) {
this.mySubscription.unsubscribe();
}
}
Обратитесь к этой теме для получения более подробной информации - https://github.com/angular/angular/issues/13831
Ответ 4
К счастью, если вы используете Angular 5. 1+, вам больше не нужно реализовывать хак, так как была добавлена встроенная поддержка. Вам просто нужно установить onSameUrlNavigation для "перезагрузки" в параметрах RouterModule:
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload})],
exports: [RouterModule],
})
Дополнительную информацию можно найти здесь: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
Ответ 5
Это может быть достигнуто с помощью взлома, перейдите к некоторому примерному компоненту и затем перейдите к компоненту, который вы хотите перезагрузить.
this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
Ответ 6
В моем приложении у меня есть компонент, и все данные поступают из API, который я вызываю в конструкторе Component. Есть кнопка, по которой я обновляю свои данные на странице. при нажатии кнопки я сохраняю данные в конце и обновляю данные. Поэтому, чтобы перезагрузить/обновить компонент - согласно моему требованию, нужно только обновить данные. если это также ваше требование, используйте тот же код, написанный в конструкторе компонента.
Ответ 7
Помоги мне
У меня есть компонент "UploadComponent", мне нужно перезагрузить.
как это сделать? SampleComponent?,
this.router.navigateByUrl('/SampleComponent', {skipLocationChange: true}); this.router.navigate([ "yourLandingComponent"]);
Ответ 8
Вы можете увидеть решение здесь. Это работает нормально для меня.
Ответ 9
KDO
// reload page hack methode
push(uri: string) {
this.location.replaceState(uri) // force replace and no show change
await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
this.location.replaceState(uri) // replace
}
Ответ 10
constructor(private router:Router, private route:ActivatedRoute ) {
}
onReload(){
this.router.navigate(['/servers'],{relativeTo:this.route})
}
Ответ 11
Еще один способ без явного маршрута:
async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('.', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
Ответ 12
Другой способ обновить (трудно) страницу в угловом 2, как это выглядит как f5
import { Location } from '@angular/common';
constructor(private location: Location) {}
pageRefresh() {
location.reload();
}