динамически создаваемые вкладки и выбор вкладок из кода - VMWare Clarity Design - PullRequest
Новая
       6

динамически создаваемые вкладки и выбор вкладок из кода - VMWare Clarity Design

0 голосов
/ 14 декабря 2018

У меня есть угловой компонент для динамического создания формы и сетки для CRUD.Метаданные поступают из API.

Он также динамически создает вкладки в зависимости от метаданных и одну вкладку по умолчанию декларативно в шаблоне.динамические вкладки выполняются с помощью * ngFor в шаблоне html, а затем объявления для вкладки по умолчанию.

Теперь моя задача состоит в том, чтобы выбрать первую вкладку в серии из кода компонента.По умолчанию angular / ясность выбирает вкладку, которая была объявлена ​​в шаблоне.

Я не могу использовать * clrIfActive, так как не могу иметь ленивый коннектор для элементов управления формой, которые расположены на разных вкладках, так как я связываю разные вещи (например,, поскольку данные Select Control поступают из бэкэнда и параметры создаются динамически) .. фактически мне нужны все элементы управления, доступные в форме на ngInit.Итак, директива * clrIfActive отсутствует.

Нужен способ программно выбрать первую вкладку (одну из динамических).

Кажется, я просто не могу этого сделать.

Я сделал ссылку viewChild на 'clrTabs' и проверил ее (ngAfterViewInit) .. все мои вкладки перечислены. Однако, кажется, не могучтобы перейти на вкладку REQUIRED через tabLinkDirectives, чтобы активировать ее.tabLinkDirectives.first и последний указатель на вкладку, которая была объявлена ​​в шаблоне.Однако _results также показывает массив с динамически созданными.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 14 декабря 2018

Обновленный ответ:

В дополнение к первому ответу ниже, попробуйте подписаться на изменения @ViewChildren и затем запустить метод / логику выбора вкладок после добавления (или удаления) вкладок.Вот код подписки: 

ngAfterViewInit() {
  this.tabLinks.changes.subscribe(tabChange => {
    this.activateFirstTab();
  });
}

А вот стек, показывающий его в действии: https://stackblitz.com/edit/clarity-v013-so-53771507-dynamic-tabs-question-agqn8x

Оригинальный ответ

Вы можете получить QueryList для всех ссылок на вкладки, подобные этой 

@ViewChildren(ClrTabLink) tabLinks: QueryList<ClrTabLink>;

Затем вы можете найти любую из вкладок в этом списке и activate() вот так: 

  activateFirstTab() {
    this.tabLinks.first.activate();
  }

Я использовалодин и тот же код из стека бликов выше, как в Clarity v0.13, так и в Clarity v1.0.0, и я всегда выбираю первую вкладку после инициализации приложения.Если ваше приложение ведет себя по-разному, можете ли вы воссоздать эту проблему в стеке?

Вот стек v0.13 , а вот стек v1.0.0.

...