Угловая директива для шоу больше / меньше - PullRequest
Новая
       26

Угловая директива для шоу больше / меньше

0 голосов
/ 18 января 2019

У меня есть следующее в приложении Angular 7, чтобы показать / скрыть больше элементов ( Пример ): 

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li *ngIf ="hidden">Item 3</li>
 <li *ngIf ="hidden">Item 4</li>
</ul>

<a href="#" (click)="hidden = !hidden"> {{hidden ? 'show less' : 'show more'}}</a>

Вопросы

  1. Можно ли это сделать с помощью директивы?

    Я часто этим пользуюсь. Я не уверен, может ли директива сделать это и как.

  2. В Angular 2+ можно определять переменные, например, скрытый, в HTML без компонента?

    Я мог бы использовать компонент с скрытой переменной, но не слишком ли это для чего-то более простого?

1 Ответ

0 голосов
/ 18 января 2019

Вы можете сделать базовый компонент, чтобы понять это. В базовый компонент вы можете добавить переменную hidden и, в конце концов, вы можете предоставить метод для изменения значения переменной hidden.

Таким образом, все ваши расширяющие компоненты будут иметь переменную hidden. Но если вам больше ничего не нужно и ваша переменная hidden обновляется просто логическим значением (this.hidden = true или this.hidden = false), у вас не будет никаких других преимуществ.

Наконец, имейте в виду, что кнопка (или та, которую вы хотите использовать) для обновления hidden значения переменной должна остаться в шаблонных файлах подкомпонентов.

В этом сценарии я думаю, что ваше решение является лучшим, но если вы хотите немного усложнить свой подход, вы можете использовать

  • маленькая HideButtonComponent только с кнопкой "показать меньше" / "показать больше"
  • a HideService, который содержит вашу переменную hidden (обновлено HideButtonComponent)

Затем в ваши компоненты вы можете добавить HideService в конструкторы и подписаться на hidden изменения переменных. В файлы шаблонов ваших компонентов вы можете поместить свой HideButtonComponent, чтобы избежать дублирования кода кнопки

Но я повторяю: это очень маленькое преимущество

...