Angular 6: программно показать / скрыть компонент с помощью @ContentChildren и @HostBinding?
Я хочу создать компонент вкладки. Это должен быть конечный результат:
<app-tab-container>
<app-tab-item caption = "A">..contentA..</app-tab-item>
<app-tab-item caption = "B">..contentB..</app-tab-item>
<app-tab-item caption = "C">..contentC..</app-tab-item>
</app-tab-container>
TabItemComponent имеет оформленное поле @HostBinding ('hidden'):
export class TabItemComponent {
@HostBinding('hidden') isHidden = false;
@Input() caption: string;
}
В TabContainerComponent я использую @ContentChildren для перебора элементов табуляции:
export class TabContainerComponent {
@ContentChildren(TabItemComponent) items: QueryList<TabItemComponent>;
tabItems: string[] = [];
ngAfterContentInit() {
this.items.forEach((item, idx) => {item.isHidden = true; this.tabItems.push(item.caption));
}
}
Наконец, шаблон TabContainerComponent выглядит следующим образом:
<div class = "tab-title"
*ngFor = "let caption of tabItems">{{caption}}</div>
<ng-content></ng-content>
Конечная цель - переключить видимость элемента вкладки с помощью события щелчка.
Когда я запускаю код, заголовки вкладок отображаются правильно, но само содержимое (app-tab-item caption = от «A» до «C») все еще отображается, настройка isHidden не переключает видимость.
Обратите внимание, что я не знаю количество компонентов «app-tab-item», так как я могу разместить «app-tab-container» в другом месте с другим содержимым.
Как я могу программно переключать видимость компонентов <app-tab-item> с помощью @ContentChildren?
Извините, не в этот раз, потому что мне пришлось много "тупить" код. Но все же я нашел решение проблемы. @HostBinding ('class.hidden') @Input () hidden = false;
Ответы 1
Я нашел решение. Вместо того, чтобы пытаться установить атрибут [hidden], я теперь установил класс css '.hidden'. Работает как положено:
export class TabItemComponent {
@HostBinding('hidden') isHidden = false;
@Input() caption: string;
}
Я использовал этот код + класс css:
export class TabItemComponent {
@HostBinding('class.hidden') @Input() hidden = false;
@Input() caption: string;
}
.hidden {
display: none;
}
When I run the code tab titles display correctly but the content itself (app-tab-item caption = "A" to "C") is still visibleМожете ли вы воспроизвести это с помощью stackblitz?