angular - 迁移到 Angular 4 后 HTTP 请求刷新浏览器

Question

自从我将一些应用程序从 Angular 2 迁移到 4 后，我注意到一个恼人的行为。通过用户操作完成的每个 HTTP 请求都会导致浏览器刷新。下面的代码重现了该错误。

服务:

@Injectable()
export class ProductService() {

    constructor(private _http: Http) { }

    toggleFav(product: Product): Observable<Product> {
        let data = { "fav": !product.fav };
        this._http
            .patch(`api/products/${product.id}`, data)
            .map((r: Response) => r.json() as Product);
    }
}

组件:

@Component({...})
export class ProductComponent {

    product: Product;

    constructor(private _productService: ProductService) { }

    fav(): void {
        this._productService
            .toggleFav(product)
            .subscribe((updatedProduct: Product) => {
                this.product = updatedProduct;
            });
    }
}

模板:

<div>
    ...
    <button type="button" (click)="fav()">
        <i [ngClass]="{ 'fav-on': product.fav, 'fav-off': !product.fav }"></i>
    </button>
</div>

在 Angular 2 中，此代码按预期运行:HTTP 客户端请求服务器，一旦 Observable 通知更新的数据，它就会绑定(bind)到模板，强制发生更改检测。但是在 Angular 4 上运行相同的代码会导致浏览器刷新整个应用程序。

我不知道谁该对这种行为负责。也许是 HTTP 客户端，也许是 Zone.js 库，也许是我，等等。有人也有这种行为吗？有办法解决吗？

谢谢。

Answer 1

因为 angular-cli 具有实时重新加载功能，这意味着如果文件(不一定是项目文件)发生更改，则会触发重新加载。我的猜测是，当您执行 PATCH 请求时，它会修改 Angular-CLI 中监视下的文件，或者它正在登录 JSON 服务器，从而触发从 Angular-CLI 重新加载。

一个可能的解决方案是将 JSON 服务器文件移动到其他位置，或者使用 -lr 选项关闭 cli 的实时重新加载:

ng serve -lr=false

这当然是不言而喻的，但让我把它放在那里，因为你说你将一些应用程序迁移到了 Angular4。您是否使用 ngserve 部署这些应用程序？或者您只是在开发过程中遇到这些问题。因为对于部署，您应该使用 ng build {options} 命令