Angular2 не освежающий родитель после удаления ребенка

Question

Недавно я сделал пример приложения с некоторыми функциями, такими как: добавление сообщений, добавление комментариев к этим сообщениям, отображение списка сообщений. Теперь я хочу добавить метод удаления сообщения.

Моя проблема заключается в том, что после удаления сообщения и возврата к списку сообщений список сообщений не обновляется. Удаленная почта все еще существует.

Я добавил метод renavigate для обновления страницы, но эта штука загружается так долго! Это похоже на 1-2s для просмотра списка.

Как просмотреть обновленный компонент без активированного обновления вручную на renavigate?

Моя кнопка в компоненте шаблона - /blog список сообщений компонента:

<a [routerLink]="['/blog']" routerLinkActive="active" 
      (click)="remove(blog.id); renavigate();" 
      class="btn btn-1 btn-1e">Delete Post</a> 

Остальной шаблона компонента:

<div *ngIf="isLoading"> 
    Loading&hellip; 
</div> 

<div *ngIf="error"> 
    Something went wrong! 
</div> 

<article *ngIf="blog" class="post"> 
    <header> 
     <h2>{{ blog.id }}\ {{ blog?.title }}</h2> 
    </header> 
    <section class="article__content"> 
     {{ blog?.text }} 
     <p class="author"> {{ blog?.name }}</p> 
    </section> 
    <footer> 
     <a [routerLink]="['/blog']" routerLinkActive="active" class="btn btn-1 btn-1e">Return</a> 
     <a [routerLink]="['/blog']" routerLinkActive="active" 
      (click)="remove(blog.id);" 
      class="btn btn-1 btn-1e">Delete Post</a> 

    </footer> 

    <my-comment [blogId]="blog.id"></my-comment> 
    </article> 

Удалить в компоненте:

remove(id: number): void { 
     console.log(id); 
     this.blogService.delete(id) 
    } 

Service удалить функция:

public delete(id: number): Promise<void> { 
     const url = `http://localhost:3000/posts/${id}`; 
     return this.http.delete(url, {headers: this.headers}) 
      .toPromise() 
      .then(() => null) 
    } 

шаблон компонента после соответствующего списка:

<article *ngFor="let post of blogPosts"> 
     <div> 
     <p>{{ post.id}}</p> 
    <h2 class="cl-effect-21"><a [routerLink]="['/posts', post.id]"> 
     {{ post.title }}</a></h2> 
      </div> 
     <div class="border"> 
    <h5 class="date">[{{ post.date }}]</h5>, <h4>{{ post.name }}</h4> 
      </div> 
    </article> 

Отредактировано: Я понимаю, что проблема с кэшем HTTP Chrome. В Firefox сообщение удаляется после возврата на страницу компонента после списка. Chrome не получает новый HTTP-запрос и отображает «старый» пост-список. Страница должна быть обновлена, чтобы просмотреть обновленный компонент после списка.

Как устранить эту проблему в угловом?

Answer 1

Ваша проблема в том, что вы «переименовываете» перед вызовом вашего запроса DELETE.

Вы можете добавить «последующую навигацию» после того, как ваше обещание в вашем «удалить» метод:

remove(id: number): void { 
    this.blogService.delete(id).then(() => this.renavigate()); 
} 

А затем измените услугу, как следующее:

public delete(id: number): Promise<Response> { 
    const url = `http://localhost:3000/posts/${id}`; 
    return this.http.delete(url, {headers: this.headers}) 
     .toPromise()) 
}