禁用整个角度分量

Question

我正在开发一个角度应用程序。应用程序由一个父组件组成，该父组件又包含多个子组件。每个子组件负责屏幕的一部分，如顶栏、侧栏、底栏等。

我有一个要求，我必须根据父组件中的某些状态将某些子组件灰化，以便用户无法对这些组件视图执行任何操作。

如何做到这一点？我知道 ng-disabled 用于禁用视图元素，但它不能用于 div。那么有哪些更好的选择呢？

Answer 1

您可以将子组件包含在字段集容器中，并disabled使用属性绑定设置该容器的属性：

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

该disabled标志将应用于容器中包含的所有输入和按钮。它还将阻止用户通过使用键盘进行 Tab 键访问字段。

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

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

请参阅此 stackblitz的演示。

Answer 2

您可以向父 div 添加条件类，例如

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

然后在css中

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

演示