Повторное использование вкладки: маршрутизация с сохранением данных

Повторное использование вкладок — это распространённая практика в серверных системах, которая решает проблему потери данных при переключении между маршрутами.

При повторном использовании текущая страница всегда остаётся открытой, а данные всех компонентов сохраняются. Когда пользователь возвращается на ту же страницу, данные извлекаются из кэша.

Как использовать?

1. Установите пакет:

   npm install --save reuse-tab

2. По умолчанию модуль AdReuseTabModule не регистрирует RouteReuseStrategy. Помимо импорта модуля, необходимо вручную зарегистрировать RouteReuseStrategy:

   // delon.module.ts или app.module.ts
   providers: [
     {
       provide: RouteReuseStrategy,
       useClass: ReuseTabStrategy,
       deps: [ReuseTabService],
     },
     ReuseTabService
   ]

Режим соответствия

В любом месте проекта (рекомендуется в startup.service.ts) можно внедрить класс ReuseTabService и установить свойство mode, либо повторно задать значение с помощью <reuse-tab [mode]="0"></reuse-tab>. Доступны следующие режимы:

• 0 (по умолчанию):

  • Можно повторно использовать: { text:'Dashboard' } и { text:'Dashboard', reuse: true }.
  • Нельзя повторно использовать: { text:'Dashboard', reuse: false }.

• 1 (рекомендуется):

  • Можно повторно использовать: { text:'Dashboard', reuse: true }.
  • Нельзя повторно использовать: { text:'Dashboard' } и { text:'Dashboard', reuse: false }.

• 2 (URL): действует для всех маршрутов, можно комбинировать с excludes для фильтрации маршрутов без повторного использования.

Если в конфигурации маршрута есть атрибут data, который содержит значение reuse, то оно имеет приоритет над вышеуказанными правилами.

Текст метки

Текст метки получается в следующем порядке:

1. Использование ReuseTabService.title = 'new title' внутри компонента для переопределения текста.
2. Атрибут data в конфигурации маршрута, содержащий reuseTitle, если он присутствует, используется вместо title.
3. Свойство text в данных меню.

Пример кода для ReuseTabService:

export class DemoReuseTabEditComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute, private reuseTabService: ReuseTabService) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.id = params.id;
      this.reuseTabService.title = `Редактировать ${this.id}`;
    });
  }
}

Жизненный цикл

Процесс повторного использования маршрута не вызывает никаких хуков жизненного цикла (например, ngOnInit), но часто требуется обновить данные во время повторного использования, поэтому reuse-tab предоставляет два новых хука жизненного цикла для временного решения этой проблемы.

onReuseInit() вызывается, когда текущий маршрут находится в процессе повторного использования.

onReuseDestroy() вызывается, когда текущему маршруту разрешено повторное использование и происходит переход на новый маршрут.

С префиксом _ (ожидается, что Angular предоставит соответствующие хуки в будущем), простой пример:

@Component()
export class DemoComponent {
  _onReuseInit() {
    console.log('_onReuseInit');
  }
  _onReuseDestroy() {
    console.log('_onReuseDestroy');
  }
}

Частые вопросы

Как отлаживать?

Повторное использование маршрута сохраняет состояние компонентов, что может привести к другим проблемам. В большинстве случаев компоненты работают нормально, но следует учитывать следующее:

• Метод OnDestroy может обрабатывать некоторые внешние стили компонентов (например, для body), что можно решить с помощью хуков жизненного цикла.
• В режиме debug консоль будет содержать много информации, полезной для анализа процесса повторного использования маршрутов.

API

Интерфейс ReuseTabService имеет следующие свойства и методы:

Методы:

Компонент reuse-tab: