Запоминание выбранной вкладки при обновлении и других случаях легко понять, но это может быть сложно реализовать. Давайте копнем глубже вместе
Проблема
Наиболее часто используемые вкладки из Angular Material были намного красивее и определенно должны использоваться в большинстве случаев. Однако мне также нужно было запомнить выбранную вкладку, чтобы при обновлении приложения отображалась выбранная вкладка. Эта, казалось бы, простая задача оказалась трудновыполнимой.
Возможные решения
Это можно решить несколькими способами, но я сузил их до двух решений:
- Использование групп вкладок материалов Angular
- Использование панели навигации mat-tab-nav
Первый вариант позволяет мне сохранить красивые вкладки, но требует запоминания того, какой индекс вкладки был выбран. В моем случае это был не вариант для меня по причинам, которые я здесь не рассматриваю.
Второй вариант требует от меня реализации маршрутизации и отображения вкладки на основе URL-адреса. Эта идея имела логический смысл, и ее было легче объяснить моим коллегам.
Объяснение выбранного решения
Концепция проста. Нам нужно запомнить выбранную вкладку, но вместо того, чтобы сохранять состояние того, какая вкладка была выбрана, мы находим способ всегда знать это — без необходимости в каком-либо состоянии.
Этого можно добиться, добавив дочерние пути к модулю и назначив путь каждой вкладке. Другими словами, когда выбран путь A, мы выбираем вкладку A. Когда выбран путь B, мы выбираем вкладку B.
Пример: родительский URL «root/parent/child»
- Если URL-адрес для «корневая/родительская/дочерняя/заказы-вкладка», тогда отображается вкладка заказов.
- Если URL-адрес для "root/parent/child/customers-tab", тогда отображается вкладка "Customers".
- Если URL-адрес для «корневой/родительский/дочерний», отображается вкладка по умолчанию.
Вывод
Можно реализовать способ запоминания вкладок без сохранения состояния, но это добавляет некоторую сложность. Таким образом, вы должны спросить себя, стоит ли это дополнительных усилий.
