禁用整个角度分量

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标志将应用于容器中包括的所有输入和按钮。它还将阻止用户通过使用键盘进行制表键来访问字段。

您可以使用以下CSS阻止与fieldset元素关联的默认样式：

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

有关演示，请参见this stackblitz。