angular - 如何以编程方式取消选择垫子选项?
问题描述
目前有一个组件充当字段菜单。当用户切换 mat-list-option 复选框时,会触发一项服务,该服务会根据视图容器中的该字段创建一个组件。但是,当创建的组件被销毁时,我希望能够触发一个函数调用,该函数调用也取消选择具有提供的字段名称的复选框。当我单击复选框以实现正确的逻辑时,我能够读取 .option._selected 事件详细信息,但是我不知道如何写入此详细信息并将 .option._selected 设置为 false 基于其相应组件被销毁。
我的字段菜单以这种方式呈现:
<mat-expansion-panel >
<mat-expansion-panel-header>
<mat-panel-title>
General
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<mat-list-option *ngFor="let rule of unfilteredRules | ruleFieldFilter:generalCollapsable; let i = index"
[selected]="checkboxStatus(rule.fieldName)" checkboxPosition="before" [value]="rule.fieldName">
{{rule.fieldName}}
</mat-list-option>
</div>
</mat-expansion-panel>
解决方案
您可以使用广播服务来实现这种情况。
export class BroadcastService {
callbackArray:Object;
constructor() {
this.callbackArray = {};
}
unsubscribe(name) {
if(this.callbackArray[name]) {
delete this.callbackArray[name];
}
}
emit(name,param) {
var event = this.callbackArray[name];
if(!event) { throw Error(name + 'event is not register');}
event.callbackList.forEach((callback, index) => {
callback(param);
});
}
customSubscribe(name, callback) {
if(!this.callbackArray[name] {
this.callbackArray[name].callbackList.push(callback);
} else {
this.callbackArray[name] = {
callbackList : [callback]
};
}
}
}
您的菜单组件文件在构造函数时调用您的订阅函数。
constructor() {
this.broadcastservice.customSubscribe('showMenuCheck', (data)) => {
if(data) {
/******Your menu logic*****/
}
}
}
在销毁新创建的组件时,您将能够通过使用此广播服务获取菜单组件文件中的函数调用。
在 ngOnDestroy 下的新组件文件中添加以下代码。
ngOnDestroy() {
this.broadcastservice.emit('showMenuCheck' /**this name should be same as the subscribe name which is mentioned in the menu component**/, {
yourMenuName : false;
});
}
推荐阅读
- java - 如何查看变量在 ArrayList 中出现的次数
- swift - 根据设备大小调整 UITableViewCell 的字体大小
- javascript - 我可以在 SilverStripe 管理员中为 Graphql 突变重新生成 CSRF 令牌吗?
- macos - 如何自定义和测试 MacOS .app 包的可执行路径、主图标和 i18n
- python - 分类标签使用交叉熵损失,准确率不变| 深度学习 pytorch
- ubuntu-16.04 - 如何获取安装在 linux 服务器上的 python 虚拟环境列表
- javascript - 如何从 RegExp 中过滤 100 个停用词列表?
- arrays - 角度,无法读取未定义的属性“水果”
- c# - 如何在 Google Cloud Vision API 中获取块的全文
- python - 如何更改嵌套有效载荷的格式?