如何以编程方式取消选择垫子选项？

Question

目前有一个组件充当字段菜单。当用户切换 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>

Answer 1

您可以使用广播服务来实现此场景。

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;
   });
}