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

构造函数调用您的订阅函数时的Menu组件文件。

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

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

1 个答案: