отказаться от подписки?что происходит с угловым компонентом, который был введен в MatDialog или MatBottomSheet при закрытии?

Question

Мой вопрос касается подписки на события компонентов, введенные в matdialog или нижнюю таблицу, например, скажем, что я делаю

 NewUser() {
const formData = {
  Title: 'NewUser',
  ValidateBtn: false,
  FormFields:
    [
      new InputField('Login', InputType.Text, [Validators.required, Validators.min(8), Validators.max(8) ] ),
      new InputField('name', InputType.Text,  [Validators.required, Validators.min(3), Validators.max(50) ] ),
      new InputField('surname', InputType.Text, [Validators.required, Validators.min(3), Validators.max(50) ])
    ]
 };

const dialogRef =  this.bottomSheet.open(DynamicFormsComponent,  { data: formData  }    );
 dialogRef.instance.EmitFormData.subscribe(data => {
 //post data to server
 dialogRef.dismiss();
 });
}

, и это работает нормально - поле ввода - это мой класс, помогающий генерировать поля формы в моем DynamicFormsComponent

, но я много читал о подписках, отписке и т. Д. Я знаю, как это работает / что unsubscribe() является хорошей практикой в ​​большинстве случаев

в этом EmitFormData я делаю complete() в концепоэтому нет необходимости отписываться

, но ЧТО, если пользователь не нажимает кнопку «Отправить» на этом DynamicFormsComponent, а вместо того, чтобы щелкнуть где-то за пределами этого компонента - на этом 'blur' / Backdrop ...

bottomSheet / matdialog закроется сам, но что с этой подпиской?я должен отписаться при закрытии этого matdialog?или angular сделать это / удалить это dialogRef и подписку с ним?

спасибо и всего наилучшего

Answer 1

Для отмены подписки на пользовательские Observables (часто необходимые, чтобы избежать утечек памяти), я настоятельно рекомендую следующий шаблон:

• создайте Subject, который будет генерироваться при уничтожении компонента
• addоператор takeUntil для каждого наблюдаемого, используемого в компоненте

private destroy$ = new Subject<boolean>();
// ...
ngOnInit() {
  const myObs$ = this.myService.getObs().pipe(  // example of Observable in component
    takeUntil(this.destroy$),
    // other Observable logic here
  );
}
// ...
ngOnDestroy() {
  this.destroy$.next(true);
}