PrimeNg: Аккордеонные вкладки не закрываются автоматически - PullRequest
Новая
       11

PrimeNg: Аккордеонные вкладки не закрываются автоматически

0 голосов
/ 06 марта 2019

Я использую PrimeNg в приложении Angular 6.Я пытаюсь обновить PrimeNg с v4.2.1 до v6.1.7.

HTML выглядит следующим образом: 

<p-accordion>
    <p-accordionTab header="tab1">.....</p-accordionTab>
    <p-accordionTab header="tab2">.....</p-accordionTab>
    <customComp1></customComp1>
    <customComp2></customComp2>
</p-accordion>

И customComp1, и customComp2 выглядят примерно так: 

<p-accordionTab header="tabX">.....</p-accordionTab>

p-accordian настроен таким образом, что одновременно может быть открыта только одна вкладка.

Окончательный DOM при проверке в браузере выглядит следующим образом: 

<p-accordion>
    <p-accordionTab header="tab1">.....</p-accordionTab>
    <p-accordionTab header="tab2">.....</p-accordionTab>
    <customComp1>
        <p-accordionTab header="tab3">.....</p-accordionTab>
    </customComp1>
    <customComp2>
        <p-accordionTab header="tab4">.....</p-accordionTab>
    </customComp2>
</p-accordion>

Проблема: Это прекрасно работает, когда я открываю tab1 или tab2, а затем пытаюсь открыть другой, но когда я открываю tab3 и / или tab4, любая другая открытая вкладкане закрывается автоматически, поэтому я вижу несколько открытых вкладок.

Я ищу способ связать все вкладки вместе, чтобы они все знали, что они принадлежат одному и тому же родительскому аккордеону.

Это было , работавшее, как и ожидалось, в v4.2.1 , но до сих пор я тестировал его с v6.0.0 и v6.1.7, и он не работает должным образом .

Во-вторых , я также не вижу стрелки переключения, которые сопровождают p-accordionTabs.Любая помощь на этом фронте также ценится!

1 Ответ

0 голосов
/ 06 марта 2019

Я предлагаю вам сделать: 

<p-accordion>
    <p-accordionTab header="tab1">.....</p-accordionTab>
    <p-accordionTab header="tab2">.....</p-accordionTab>
    <p-accordionTab header="tab3"><customComp1>....</customComp1></p-accordionTab>
    <p-accordionTab header="tab4"><customComp2>....</customComp2></p-accordionTab>

</p-accordion>
...