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

服务删除功能：

 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>

编辑：我意识到问题在于Chrome http缓存。在Firefox上，该帖子在返回到列表后组件页面后被删除。 Chrome无法获取新的http请求并显示“旧”后列表。必须刷新页面以查看更新的列表后组件。

如何在Angular中修复此问题？

Answer 1

您的问题是在调用DELETE请求之前“重新启动”。

您可以在“删除”方法中添加“承诺”之后的“renavigate”：

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())
}

删除子

1 个答案: