Я довольно новичок в Angular, и мне нужно решить простую проблему: передать данные между вкладками в проекте на основе углового загрузчика.
В настоящее время у меня есть основной компонент, имеющий структуру вкладок (постараюсьупростить вещи):
<div>
<div>
<ul id="tab1">
<li class="nav-item">
<a
[ngClass]="{'nav-link': true, 'active': (activeTab === 'tab-1')}"
data-toggle="tab"
href="#tab1" (click)="activeTab = 'tab-1'">Tab1</a>
</li>
<li class="nav-item">
<a
[ngClass]="{'nav-link': true, 'active': (activeTab === 'tab-2')}"
data-toggle="tab"
href="#tab2" role="tab" (click)="activeTab = 'tab-2'">Tab2</a>
</li>
</ul>
</div>
<div>
<div class="tab-pane fade {{activeTab === 'tab-1' ? 'show active' : ''}}" id="tab1-tab" #tab1
role="tabpanel">
<app-tab1 [id]="id"></app-tab1>
</div>
<div class="tab-pane fade {{activeTab === 'tab-2' ? 'show active' : ''}}" id="tab2-tab" #tab2
role="tabpanel">
<app-tab2 [id]="id"></app-tab2>
</div>
</div>
</div>
Каждая вкладка представлена своим собственным компонентом.Переключение между вкладками работает нормально.Первая вкладка представляет собой обзор элементов, представленных в виде таблицы (p-dataTable), на второй вкладке вы можете выбрать один из элементов и получить некоторые сведения о нем (функциональность уже представлена).Я пытаюсь реализовать следующее поведение: «Щелкните элемент в таблице на первой вкладке -> вкладка переключается на вторую вкладку, и этот элемент выбирается в раскрывающемся списке, и отображается информация об элементе».
Проблема, с которой я столкнулся, состоит в том, что структура вкладок - это один компонент, первая вкладка находится в другом, а вторая - в отдельном.Таким образом, когда на первой вкладке нет понятия других вкладок и нет способа передать идентификатор элемента.Мы используем маршрутизацию для переключения между различными компонентами, но в этом случае путь не должен изменяться, поскольку все эти компоненты, представляющие вкладки под одним и тем же путем, скажем, / items