Блог

В настоящее время существует компонент, который действует как меню полей. Когда пользователь устанавливает флажок mat-list-option, запускается служба, которая создает компонент на основе этого поля в контейнере представления. Однако, когда этот созданный компонент будет уничтожен, я хочу иметь возможность запускать вызов функции, который также отменяет флажок с указанным именем поля. Я могу прочитать .option._ выбранная информация о событии, когда я нажимаю флажок, чтобы реализовать правильную логику, однако я не знаю, как записать эту информацию и установить .option ._ выбрано значение 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;
   });
}