отключение всего углового компонента

Question

Я работаю над угловым приложением.Приложение состоит из родительского компонента, который затем содержит несколько дочерних компонентов.Каждый дочерний компонент заботится о какой-либо части экрана, например, о верхней, боковой, нижней и т. Д.в родительском компоненте, чтобы пользователь не мог выполнять какие-либо действия с представлениями этих компонентов.

Как этого достичь?Я понимаю, что ng-disabled используется для отключения элементов вида, но его нельзя использовать для div.Так какие же лучшие варианты доступны?

Answer 1

Вы можете добавить условный класс в родительский div, например,

<div [ngClass]="{'disabled':yourCondition}">
<your-component></your-component>
</div>

, затем в css

.disabled
{
  pointer-events: none;
  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Demo

Answer 2

Вы можете включить дочерний компонент в контейнер fieldset и установить свойство disabled этого контейнера с привязкой свойства:

<fieldset [disabled]="!childEnabled">
  <my-component></my-component>
</fieldset>

Будет применен флаг disabledдля всех входов и кнопок, включенных в контейнер.Кроме того, пользователь не сможет получить доступ к полям с помощью вкладок с помощью клавиатуры.

Вы можете запретить стилизацию по умолчанию, связанную с элементом fieldset, с помощью следующего CSS:

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

См. этот стек * блиц для демонстрации.