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

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

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

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

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

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

Я просто не могу этого сделать.

Я сделал ссылку viewChild на clrTabs и проверил ее (ngAfterViewInit) .. все мои вкладки перечислены. Однако, похоже, не могу попасть на ТРЕБУЕМУЮ вкладку через tabLinkDirectives, чтобы активировать ее. tabLinkDirectives.first и last указывают на вкладку, которая была объявлена ​​в шаблоне. Однако _results также показывают массив с динамически созданными массивами.

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


vmware-clarity
person user2533922    schedule 13.12.2018    source источник
comment
Извините, но сложно понять, что у вас есть и чего вы пытаетесь достичь. Я создал стартовый stackblitz, который динамически создает вкладки с *ngFor здесь: stackblitz.com/edit/ Можете ли вы его разветвить и изменить, чтобы я мог лучше понять, что вы пытаетесь сделать?   -  person hippeelee    schedule 14.12.2018
comment
привет @hippeelee .. я раздвоился .. ясность-v1 -0-so-53771507-dynamic-tabs-question-re5nwg.stackblit Теперь я хочу выбрать вкладку Dashboard из кода.   -  person user2533922    schedule 14.12.2018
comment
@hippeelee В указанном вами stackblitz .. выбор вкладки, по-видимому, по умолчанию равен первой вкладке. В моем случае (в моем приложении не на вилке stackblitz) кажется, что выбирается последняя вкладка, которую я объявил в шаблоне. Я использую пример v0.13..stackblitz на 1.0? В любом случае, как мне выбрать конкретную вкладку (например, облако) из кода ??   -  person user2533922    schedule 14.12.2018
comment
Я добавил ответ с некоторыми примерами приложений как для v1.0.0, так и для v0.13.0. Можно там обсудить?   -  person hippeelee    schedule 14.12.2018
comment
@ hippeelee..простите за незнание .. добавил и где обсудить?   -  person user2533922    schedule 14.12.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

А вот stackblitz, демонстрирующий это в действии: https://stackblitz.com/edit/clarity-v013-so-53771507-dynamic-tabs-question-agqn8x

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

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

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

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

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

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

Вот v0.13 stackblitz, а вот v1.0.0 stackblitz.

person hippeelee    schedule 14.12.2018
comment
@ user2533922 здесь показано, как получить список clrTabLinks и затем активировать один из них одним нажатием кнопки. Решает ли это вашу проблему? - person hippeelee; 14.12.2018
comment
Спасибо за помощь .. однако, у меня определенно есть проблема, так как я получаю только ОДНУ ВКЛАДКУ (та, что указана в шаблоне, и НИКАКАЯ из динамически созданных) .. и console.log показывает clrTabLink вместо QueryList как в твоем случае. Может быть проблема с жизненным циклом ?? Однако все ВКЛАДКИ находятся в пользовательском интерфейсе как epxected ... и выбор по умолчанию переходит на вкладку, которая была объявлена ​​в шаблоне .. Гарантируется ли, что ngAfterViewInit будет последним крючком жизненного цикла? Все, что вы можете придумать / - person user2533922; 14.12.2018
comment
Судя по тому, что вы описываете, это не похоже на проблему жизненного цикла. Если вы сможете воссоздать описанную вами проблему в стеке, я буду счастлив взглянуть на нее и посмотреть, что происходит. - person hippeelee; 14.12.2018
comment
@ user2533922 Если вы получаете только одну вкладку и ClrTabLink вместо QueryList, это означает, что вы, вероятно, используете @ContentChild вместо @ContentChildren. - person Eudes; 14.12.2018
comment
@Eudes .. Нет, сэр .. используя только ViewChild - person user2533922; 17.12.2018
comment
@hippeelee Вот stackblitz для моделирования, близкий к моей настройке ... Это очень похоже на проблему синхронизации ... Я дал задержку в 1 секунду для заполнения значений вкладки ... и результат почти такой же, как мой. . вкладка, которая была объявлена ​​в шаблоне, активируется по умолчанию ... однако в моем случае я даже не могу выполнить переключение через нажатие кнопки .... В моем случае у меня есть пара асинхронных вызовов для бэкэнда, чтобы получить метаданные для вкладки, элементы управления формами и т. д. Надеюсь, это даст вам представление о ситуации и поможет мне ... stackblitz.com/edit/ - person user2533922; 17.12.2018
comment
@hippeelee Спасибо за это .. похоже, что это именно то, что подправил заказанный на stackblitz .. попробую в моем коде .... - person user2533922; 18.12.2018
comment
Замечательно, дайте мне знать, работает ли он и поможет ли вам, приняв мой ответ или сообщив мне, что не работает. - person hippeelee; 21.12.2018