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通知更新的数据，它就会绑定到模板，从而强制进行更改检测。但是运行在Angular 4上的相同代码会导致浏览器刷新整个应用程序。

我不知道谁是这种行为的责任人。也许HTTP客户端，也许是图书馆Zone.js，也许是我，等等。有人也有这种行为吗？有什么方法可以解决吗？

感谢。

Answer 1

因为angular-cli具有实时重载，这意味着如果文件发生更改（不一定需要是项目文件），它将触发重新加载。我的猜测是当你执行PATCH请求时，这会在angular-cli中修改watch下的文件，或者它会在JSON服务器中记录，从而触发从angular-cli重新加载。

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

ng serve -lr=false

这当然说明了一切，但是我要把它放在那里，因为你说你将一些应用程序迁移到angular4。您是否使用ng serve部署这些应用？或者您只是在开发过程中遇到这些问题。因为要进行部署，您应该使用ng build {options}命令

迁移到Angular 4

1 个答案: