Як оновити компонент в Angular


84

Я працюю над проектом Angular. Я борюся з дією оновлення в компоненті.

Я хотів би оновити компоненти маршрутизатора після натискання кнопки. У мене є кнопка оновлення, коли я натискаю на неї, компонент / маршрутизатор повинен бути оновленим.

Я спробував, window.location.reload()і location.reload()ці два не підходять для моїх потреб. Будь ласка, допоможіть, якщо хтось це знає.


Чи можете ви поділитися своїм кодом у цьому питанні? що вас пробують.
Чандру

це складний код, він містить N рядків коду, важко ділитися
Sreehari Ballampalli

@Saurabh, зазвичай не потрібно перезавантажувати компонент. Ви можете мати функцію (наприклад, викликати "перезапуск") і викликати функцію за допомогою кнопки "Оновити". Якщо вам потрібна передплата на зміну шляху або інша послуга, використовуйте функцію ngOnInit - ваш компонент повинен розширювати OnInit-, а не конструктор
Eliseo

Це те , що я зробив з кутовими 9 stackoverflow.com/a/60909777/1072395
Wlada

Відповіді:


114

Після деяких досліджень та модифікації мого коду, як показано нижче, сценарій спрацював для мене. Я щойно додав умову:

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 

1
Я використовую це в ін’єкційній службі. Я замінив "your actualComponent"змінною. Для змінної встановлено значення this.location.path()перед викликом navigateByUrl. Таким чином, немає необхідності передавати будь-які параметри з виклику компонента або дублювати / передавати маршрути.
Tewr

4
Ви можете пояснити, що таке "RefrshComponent" та "Your actualComponent"?
reverie_ss

15
Більшості всіх буде добре використовувати, '/'де /RefrshComponentє, і [Your actualComponent"]ви просто передасте URL-адресу (та / або параметри), яку хотіли б перезавантажити, наприклад this.router.navigate(["/items"]). Цей хак по суті переспрямовує на верхню URL-адресу, а потім дуже швидко повертається до передбачуваної URL-адреси, яка непомітна для більшості користувачів і, як видається, найелегантніший хак для простого досягнення цього.
тихо

2
Я згоден, що це точно має спрацювати ... але це не вдається в моєму додатку (Angular 6). Якщо я використовую '/'в якості фіктивного маршруту, він переходить (через redirectTo) туди, де мій app-routing.module.ts переспрямовує на шлях ''(порожній рядок) і зупиняється, не переходячи до маршруту завершення у navigate()виклику. Якщо я використовую неіснуючий рядок (наприклад /foo) як мій фіктивний маршрут, він переходить (через redirectTo) туди, де мій app-routing.module.ts переспрямовує на **(все інше) і знову зупиняється, не переходячи до реального маршруту. Цікаво, що рядок URL-адреси ЗМІНЮЄТЬСЯ на реальний маршрут. Будь-які думки про те, що тут інакше?
Майкл

1
це може спричинити нескінченний цикл перенаправлення, якщо не використовувати обережно
Томас Кац

64

Використовуйте this.ngOnInit (); перезавантажити той самий компонент, замість цього перезавантаживши всю сторінку !!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }

5
Незважаючи на те, що це може відповісти на питання авторів, у ньому відсутні деякі пояснювальні слова та / або посилання на документацію. Фрагменти необробленого коду не дуже корисні без деяких фраз навколо них. Ви також можете виявити дуже корисним написання хорошої відповіді . Будь ласка, відредагуйте свою відповідь.
hellow

1
Це кращий вхід, ніж вибрана відповідь, але йому не вистачає пояснень. У моєму конкретному випадку мені довелося оновити дочірній компонент. У цьому випадку існує кілька способів, але рекомендується використовувати послугу або транслювати подію від батьків до дитини.
Клаудіо

5
Погоджено, це працює, лише якщо ви хочете оновити компонент всередині компонента - якщо ви маєте справу з дочірніми / зовнішніми компонентами, this.ngOnInit () не буде працювати
astro8891,

3
Незважаючи на те, що він працює для компонента, він не скидає валідатори форм.
Вікі Гонсалвес,

1
Працює ідеально, дякую. А щодо пояснення AFAIC, кодекс говорить все.
Мартон Татай

27

Додавання цього до коду до конструктора необхідного компонента спрацювало у мене.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

Переконайтеся, що unsubscribeз цієї моєї підписки в ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

Докладніше див. У цій темі - https://github.com/angular/angular/issues/13831


15

На щастя, якщо ви використовуєте Angular 5.1+, вам більше не потрібно реалізовувати хакерство, оскільки додано рідну підтримку. Вам просто потрібно встановити onSameUrlNavigation на 'reload' у параметрах 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


Ви також можете використовувати router.onSameUrlNavigation = 'reload'властивість введеного маршрутизатора.
0zkr PM

4
Використовуючи angular 6, для мене це не мало різниці, тобто компонент не перезавантажився. Однак прийнята відповідь працює.
Tewr

4
Хоча це не зовсім зрозуміло в документах, onSameUrlNavigationвоно призначене для перезапуску Guards / Resolvers, а не для перезавантаження вже направлених компонентів. Докладніше про це див. На github.com/angular/angular/issues/21115 . Це рішення буде працювати для більш складних додатків, що використовують Guards / Resolvers, але не вдасться на простих прикладах.
тихо

1
так, onSameUrlNavigation знову запустить навігаційні події, але це не перезавантажує компонент
Paul Story

6

це трохи нестандартно, і я не знаю, допомагає це вам чи ні, але спробував

this.ngOnInit();

це функція, тому будь-який код, який у вас є, буде викликаний так само, як оновлення.


3

просто зробіть це: (для кутового 9)

import { Inject } from '@angular/core';    
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

2
Будь ласка, прочитайте коментар до OP, оновлення всієї сторінки для нього не є варіантом, це
перешкоджає тому,

Запитання вимагає перезавантажити компонент лише не цілу сторінку.
Сантош

2

Цього можна досягти шляхом злому, перейдіть до деякого зразка компонента, а потім перейдіть до компонента, який потрібно перезавантажити.

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);

SampleComponent означає, що це повинен бути порожній компонент або інший компонент у моєму проекті?
Шріхарі Баллампаллі

він повинен бути фіктивним, може бути порожнім
Саджетара

Гаразд, я спробую це
Sreehari Ballampalli

якщо я даю true, я отримую повідомлення про помилку: [ts] Тип 'true' не має властивостей, спільних із типом 'NavigationExtras'
Sreehari Ballampalli

@SreehariBallampalli перевірте оновлену відповідь, вам потрібно передати об’єкт {skipLocationChange: true}
Саджетара

2

У моєму додатку у мене є компонент, і всі дані надходять з API, який я викликаю в конструкторі Component. Існує кнопка, за допомогою якої я оновлюю дані своєї сторінки. після натискання кнопки у мене є збереження даних у фоновому режимі та оновлення даних. Отже, перезавантажити / оновити компонент - відповідно до моєї вимоги - це лише оновити дані. якщо це також ваша вимога, тоді використовуйте той самий код, написаний у конструкторі компонента.


2

Ще один спосіб без чіткого маршруту:

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

1

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
  }


0

файл HTML

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

ts файл

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  }); 

-3

Інший спосіб оновити (жорсткий спосіб) сторінку в кутовому 2, як це, виглядає як f5

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}

1
Він сказав, що перезавантаження цілої сторінки не підходить, це перезавантажує всю сторінку, а не лише окремі / кілька компонентів.
Мілан Велебіт

Я використав це, за винятком того, що служба кутового розташування не має перезавантаження, тому я використав вікно.
Paul Story
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.