Праздновать независимость

Одна из самых забавных вещей в Angular - да, я сказал весело И я не саркастичен - придумывает способы создания полностью модульных компонентов, которые могут выполнять функции с помощью подключаемого модуля и -игровое отношение. Например, я создал кнопку, которая может скрыть любого родителя, просто включив его компонент в компонент, который вы пытаетесь скрыть.

Начните с общего компонента кнопки

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

Первым шагом является создание компонента кнопки, который будет основой всех ваших других кнопок. Например, ниже показан базовый компонент кнопки, который я использую для веб-сайта моего блога. Это дает разработчику возможность добавить любое содержимое, которое они хотят для кнопки, как указано <ng-content>.

button.component.html

<button [ngClass]="class" [disabled]="disabled">
  <ng-content></ng-content>
</button>

Добавьте CSS к вашей кнопке

button.component.scss

Разработчик может отключить кнопку, установив для свойства disabled значение true. Я добавил CSS, чтобы сделать отключенную кнопку непрозрачностью 0,25, чтобы она тоже казалась отключенной.

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

Разработчик также может отказаться от рамки или заполнения.

button.component.ts

Создайте кнопку, которая может скрыть своего родителя

Я добавил входные данные, чтобы пользователь мог передать метку и выбрать значок по умолчанию, если это необходимо. Это полезно, если разработчик хочет использовать стили, применяемые к кнопке, например, размер шрифта, отступ, размер значка и т. Д.

button-hide-parent.component.html

button-hide-parent.component.ts

Создав экземпляр ElementRef, я могу легко получить ссылку на компонент и, следовательно, получить его родительский элемент, не запрашивая DOM. Используя Renderer2, я могу безопасно настроить таргетинг на родительский компонент и применить стиль display:none.

Я также добавил EventEmitter на тот случай, если родителю нужно знать, что родитель был скрыт.

Используйте новую кнопку

Чтобы использовать новую кнопку, включите селектор в HTML-шаблон компонента, который вы хотите скрыть. Никакого дополнительного кода для его работы не требуется.

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