【Angular】如何更好的解决项目发布更新后的缓存问题？

Question

缓存好，缓存妙，缓存一样让人头疼。

虽然说，angular可以使用npm script的--prod来打包程序，同时，也会在文件名上标注MD5，用以识别有更新内容和无更新内容的文件。

但是，假设我在更新前是一直停留在A页面，那么我在A页面上的变更，就算更新发布之后，也要过一小段时间后才会更新。那这个时候，如果要操作什么数据啊，等等就很麻烦了。这种情况该怎么破？

再假设，如果我一直停留在B页面，但是，这一次的更新，我已经删掉了B页面的内容，并更新发布了。结果，B页面还是可以继续操作，我从B跳转到A页面，然后再回退，还是可以进到B页面的。除非等到浏览器自动刷新或者我主动刷新，才会404。这种情况又该怎么破呢？

在网上，有看到一个方法，就是还可以在URL上加上随机数或者时间戳来保证没有缓存。如果是加时间戳，是加在href中或者js中，还是加在app.routing.ts中(loadChildren)？

或者，还有更好的办法吗？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

Angular 2+ 解决方案

1. 利用 @Input 和 @Output：Angular 2+ 提供了 @Input 和 @Output 的特性，可以帮助我们控制DOM元素的状态，从而实现缓存优化。例如，你可以设置一个输入属性（@Input()）来控制某个组件是否应该被缓存，而另一个输出属性（@Output()）则用来通知其他组件当前状态的变化。

@Component({
    selector: 'my-component',
    template: `
        <input #input [(ngModel)]="someValue" />
        <button (click)="someAction()">Some Action</button>
    `,
})
export class MyComponent {
    someValue = '';
    someAction() {
        this.someValue = 'new value';
    }
}

1. 使用 asyncPipe 或者 pipe()：asyncPipe 可以让你的管道在执行完所有依赖项之前返回一个值，这有助于避免不必要的重载。此外，你也可以使用 pipe() 方法来创建一个新的 pipe，这个 pipe 只处理一部分逻辑，而将其余部分交给父级组件或服务来处理。

2. 利用 Observable 和 mergeMap：如果你有一个需要频繁更新的数据源，你可以考虑使用 Observable 来订阅数据变化，并且只在改变时更新 DOM。然后，你可以使用 mergeMap 方法来合并多个 Observable，这样即使有多个 Observable 发生改变，整个组件也不会出现混乱。

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html'
})
export class MyComponent implements OnInit {

    private data$: Observable<string>;

    constructor(private service: Service) {}

    ngOnInit(): void {
        // Initialize your data$ here
        this.data$ = this.service.getData();
    }

    async updateData(newData: string): Promise<void> {
        await this.service.updateData(newData);
        this.data$.next(newData);
    }
}

1. 利用 environment 配置：在 environments/environment.ts 文件中添加以下配置：

// ... other environment configuration

export const environment = {
    production: true,
    // ...
};

现在，当生产环境切换为开发环境时，你的应用程序会重新加载所有资源，包括缓存。