使用Angular缓存父页面数据的方法

使用Angular缓存父页面数据是提高应用性能的一种有效方式。下面将介绍如何使用Angular提供的服务和技术来实现此目的。

缓存父页面数据的方法

使用Angular 的服务

1. 使用@Input 和@Output 装饰器

在组件之间可以使用@Input 和@Output 装饰器来传递数据，父组件可以通过将数据绑定到@Input 装饰器上来将数据传递给子组件。这种方式需要在每次组件之间的交互中传递数据。

```typescript
// 父组件
import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
template: `

Parent Component

  <app-child [data]="data" (update)="onUpdate($event)"></app-child>
`

})
export class ParentComponent {
data = 'hello world';

onUpdate(data: string) {
  console.log('[Parent update]', data);
}

}

// 子组件
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
selector: 'app-child',
template: `

Child Component

  {{ data }}

  <button (click)="handleClick()">Update</button>
`

})
export class ChildComponent {
@Input() data!: string;
@Output() update = new EventEmitter();

handleClick() {
  this.data = 'hello world (updated)';

  this.update.emit(this.data);
}

}
```

1. 使用@ViewChild 装饰器

父组件可以通过使用@ViewChild 装饰器来直接访问子组件，并获取其数据。这种方式可以在父组件中直接使用子组件的数据，而不用每次传递数据。

```typescript
// 父组件
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
selector: 'app-parent',
template: `

Parent Component

  <button (click)="handleClick()">Update</button>

  <p>{{ data }}</p>
`

})
export class ParentComponent {
@ViewChild(ChildComponent, { static: true }) child!: ChildComponent;

data = '';

handleClick() {
  this.data = this.child.data;

  console.log('[Parent update]', this.data);
}

}

// 子组件
import { Component } from '@angular/core';

@Component({
selector: 'app-child',
template: `

Child Component

  {{ data }}
`

})
export class ChildComponent {
data = 'hello world';
}
```

使用 Angular 的技术

1. 使用路由缓存机制

Angular 的路由提供了一种缓存机制，可以缓存某些页面的数据，这些页面在路由上的状态不会改变，只会当离开这些路由状态后再次重新构建。这种缓存机制可以使用路由守卫来实现，具体实现方式如下：

```typescript
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Injectable({
providedIn: 'root'
})
export class CacheAuthGuard implements CanActivate {
canLoad(route: Route): boolean {
return true;
}

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  const data = state.root.firstChild?.data;

  if (data && data.cached) {
    console.log('[Cache auth guard] load from cache');

    return of(false);
  }

  return of(true).pipe(
    mapTo(() => {
      const child = state.root.firstChild;

      if (child) {
        child.data = { cached: true };
      }

      return true;
    })
  );
}

}
```

上面的实现可以将特定路由的数据缓存起来。

1. 使用 LocalStorage 本地存储

当需要缓存大量数据时，最好的选择是本地存储，LocalStorage 是一种轻量级的本地存储机制，可以在浏览器中缓存数据并在下次访问时直接获取。在 Angular 中可以通过创建一个服务来封装 LocalStorage 的 API，具体实现方式如下：

```typescript
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class LocalStorageService {
private storage = window.localStorage;

get(key: string, defaultValue: string | null = null): string | null {
  const val = this.storage.getItem(key);

  return val === null ? defaultValue : val;
}

set(key: string, value: string): void {
  this.storage.setItem(key, value);
}

remove(key: string): void {
  this.storage.removeItem(key);
}

}
```

上面的实现已经封装了 LocalStorage 的常用 API，可以直接使用。例如，我们可以通过在 Service 类中创建一个数据变量来缓存数据：

```typescript
import { Injectable } from '@angular/core';
import { LocalStorageService } from './local-storage.service';

@Injectable({
providedIn: 'root'
})
export class DataService {
private static readonly KEY = '_my_data';

private data = '';

constructor(private localStorage: LocalStorageService) {
  const cachedData = this.localStorage.get(DataService.KEY);

  if (cachedData) {
    this.data = cachedData;
  }
}

getData(): string {
  return this.data;
}

updateData(data: string): void {
  this.data = data;

  this.localStorage.set(DataService.KEY, data);
}

}
```

注意：在使用 LocalStorage 的时候必须要注意数据的清理和删除，否则可能会导致内存溢出等问题。

示例说明

1. 示例一：使用@ViewChild 装饰器缓存父页面数据。

通过在父组件中使用@ViewChild 装饰器可以直接访问子组件的数据，并将其缓存到父组件中。例如，下面的父组件可以直接获取子组件的数据，并将其显示在页面上。

```typescript
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
selector: 'app-parent',
template: `

Parent Component

  <button (click)="handleClick()">Update</button>

  <p>{{ data }}</p>
`

})
export class ParentComponent {
@ViewChild(ChildComponent, { static: true }) child!: ChildComponent;

data = '';

handleClick() {
  this.data = this.child.data;

  console.log('[Parent update]', this.data);
}

}

// 子组件
import { Component } from '@angular/core';

@Component({
selector: 'app-child',
template: `

Child Component

  {{ data }}
`

})
export class ChildComponent {
data = 'hello world';
}
```

1. 示例二：使用 LocalStorage 本地存储缓存父页面数据。

通过在 Service 类中创建一个数据变量来缓存数据，并使用 LocalStorage 将数据保存在本地。例如，下面的服务类可以通过保存数据到 LocalStorage 中来缓存数据，同时可以在需要的时候重新获取数据。

```typescript
import { Injectable } from '@angular/core';
import { LocalStorageService } from './local-storage.service';

@Injectable({
providedIn: 'root'
})
export class DataService {
private static readonly KEY = '_my_data';

private data = '';

constructor(private localStorage: LocalStorageService) {
  const cachedData = this.localStorage.get(DataService.KEY);

  if (cachedData) {
    this.data = cachedData;
  }
}

getData(): string {
  return this.data;
}

updateData(data: string): void {
  this.data = data;

  this.localStorage.set(DataService.KEY, data);
}

}
```

我们可以在组件中使用这个 Service 来缓存数据，例如：

```typescript
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-root',
template: `

App Component

  <input [(ngModel)]="data" (keyup)="handleKeyup($event)" />

  <p>{{ data }}</p>
`

})
export class AppComponent {
data = '';

constructor(private dataService: DataService) {}

handleKeyup(event: KeyboardEvent): void {
  const input = event.target as HTMLInputElement;
  const value = input.value;

  this.dataService.updateData(value);
}

}
```

当输入框中的值发生改变时，服务会自动更新数据，并将其保存到本地，下次进入应用时可以使用保存的数据。