html - 角度禁用容器
问题描述
好的,所以我的问题是一个常见问题,但到目前为止我发现的答案并不令人满意和/或不能完全回答我的情况。
我创建了 ac# 类型的 stackpanel 组件,它根据您选择的内容垂直或水平放置其内容。用于此的 html 是:
<div #root
[fxLayout]="this._orientation"
fxLayoutAlign="flex-start"
[fxLayoutGap]="this.spacing"
[style.marginBottom]="this.margin_bottom"
[style.marginLeft]="this.margin_left"
[style.marginRight]="this.margin_right"
[style.marginTop]="this.margin_top"
[style.width]="this.width"
[style.height]="this.height"
[style.background]="this.background">
<ng-content></ng-content>
</div>
fxLayout、fxLayoutAlign 和 fxLayoutGap 来自 angular flex 库,可以通过 npm 安装。
所以我想做的是有另一个变量
@Input() disabled: boolean;
在我的组件文件中,我想要做的是禁用 ng-content 中的所有子项。现在让我解释一下我不想要什么。我不希望在 div 上进行简单的样式更改以关闭点击事件,因为内容仍然可以通过选项卡进行切换,您甚至可以按键盘上的 enter 按钮来按下应该被禁用的按钮或控件。
所以我脑子里想的是让所有的孩子都进入#root(div)并设置“禁用”属性。
private disableChildren(value: boolean) {
const dom = this.root?.nativeElement?.children;
if (dom == null) return;
const list: Element[] = [].slice.call(dom);
list.filter(x => x['disabled'] != null).forEach(x => x['disabled'] = value);
}
问题在于 this.root?.nativeElement?.children 是 HTMLElement 并且没有对组件文件的引用。此外,一些 html 子项具有禁用标签,而有些则没有。例如,“按钮”有一个禁用的标签,但“垫子图标”没有。我创建了一堆自定义组件,并在所有组件文件(如 mat-icon)中放置了一个“禁用”@Input,我想从父类设置该变量,但我没有看到尽可能。
所以所有这些信息要问:
有没有办法在 ng-content 内的子组件上设置属性?就像从禁用子函数中的堆栈面板组件设置@Input 禁用属性一样?
或者
有一个更好的方法吗?老实说,我认为没有,因为我已经寻找了几天来禁用 div 中的所有孩子,但没有任何事情可以按照它应该的方式工作。
解决方案
ngAfterViewInit(): void {
this.disableHTMLElement(this.container.nativeElement);
}
private disableHTMLElement(element: HTMLElement): void {
element.setAttribute('disabled', this.disabled ? 'true' : 'false');
const children: HTMLElement[] = Array.prototype.slice.call(element.children);
children.forEach((child) => this.disableHTMLElement(child));
}