Как открыть угловые динамические вкладки с различными компонентами приборной панели внутри? - PullRequest
Новая
       21

Как открыть угловые динамические вкладки с различными компонентами приборной панели внутри?

0 голосов
/ 06 ноября 2018

У меня возникла проблема с динамическими вкладками, из-за которой я не смог найти ни хорошего решения, ни хорошего примера, поэтому надеюсь на небольшую помощь здесь.

Я хочу, чтобы посетители моей веб-страницы попадали на главную страницу, где есть таблица, в которой перечислены различные организации и пользователи, принадлежащие к этой организации. Когда посетители нажимают на организацию, должна открываться вкладка и отображаться компонент панели мониторинга, специфичный для организаций (то есть панель мониторинга с карточками с информацией профиля, которая важна для организации). Однако, когда посетитель нажимает на пользователя, также должна открываться вкладка, но на экране отображается другой компонент панели мониторинга, который предназначен для отображения профилей пользователей. В моем примере стекаблиц ниже, мне удалось настроить динамические вкладки и на главной странице, где есть кнопки для 2 организаций и 3 пользователей, принадлежащих к этим двум организациям.

Вопрос теперь заключается в том, как сделать так, чтобы на вкладках для организаций отображался компонент информационной панели организации, а на вкладках для пользователей - компонент пользовательской панели?

Есть ли в addTab() способ добавить параметры, чтобы он не только получал название новой вкладки? Например, он также может получить информацию о том, какую панель мониторинга пользователь хочет показать на новой вкладке, то есть «пользователь» или «организация»?

Или Angular предлагает лучшую альтернативу для этого?

Вот мой пример stackblitz

1 Ответ

0 голосов
/ 07 ноября 2018

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

{
  tabName: string,
  context: string,
}

и затем в своем html вы можете использовать *ngIf для проверки контекста того, является ли он клиентом или организацией 

<app-app-dashboard *ngIf="tab.context == 'org'"></app-app-dashboard>
<app-client-dashboard *ngIf="tab.context == 'user'"></app-client-dashboard>

И это все, что тебе нужно сделать. Вот рабочий stackblitz . Я добавил цвета фона, чтобы вы могли заметить разницу между фоном клиента и фона организации.

...