Angular 如何对组件销毁进行控制？

我有一个带有FormControl的组件，并订阅了它的值更改：

@Component(...)
export class FooComponent implements OnInit, OnDestroy {
  fooFormControl: FormControl;

  ...

  ngOnInit() {
    this.fooFormControl.valueChanges.subscribe(
      () => {...},
      () => {},
      () => {
        // never happens
      },
    );
  }

  ngOnDestroy() {
    //happens
  }
}

但当组件被销毁时，FormControl元素不会被销毁，onComplete回调也不会发生

---

在component destroy上销毁FormControl元素的正确方法是什么？

您不能销毁表单控件。组件中的所有内容都将被销毁，但事件可能会保存在应用程序中。所以你可以取消订阅它的活动

@Component(...)
export class FooComponent implements OnInit, OnDestroy {
  fooFormControl: FormControl;
  var subscriber;

  ...

  ngOnInit() {
    this.subscriber = this.fooFormControl.valueChanges.subscribe(
      () => {...},
      () => {},
      () => {
        // never happens
      },
    );
  }

  ngOnDestroy() {
    this.subscriber.unsubscribe();
  }
}

---

FormControl

不应完成可观察项，尽管如果存在属于完全回调的某些逻辑，则可以手动完成此操作

由于

valueChanges

是事件发射器，并从RxJS

Subject

继承，因此可以取消订阅或完成：

ngOnDestroy() {
  this.fooFormControl.valueChanges.complete();  
  // and/or
  this.fooFormControl.valueChanges.unsubscribe();
}

---

EventEmitter

将来可能不会成为主题。这可能会导致突破性的变化，但目前它仅依赖于RxJS。

这里有两个想法可以帮助您。不确定他们是否是“正确的方式”，但到目前为止，这对我来说效果相当好。除此之外，我还像往常一样取消了恩格德斯特罗的订阅

#1通过takeUntil介绍自己的主题，强制完成

在TypeScript中，valueChanges属性属于Observable类型。如果你不想绕开这个话题，进入主题，那么你可以使用takeUntil操作符介绍你自己的主题。这将允许您在高于可观察到的valueChanges的级别上强制传播完成。重要的是，在切换地图或切换到observable将继续且您的订阅不会被取消之前，不要将Take放在操作员面前！出于这个原因，我把它放在subscribe操作符前面

以下是一个例子：

const stop = new Subject();

// simulate ngOnDestroy
window.setTimeout(() => {
  stop.next();
  stop.complete();
}, 3500);

Observable
  .interval(1000)
  .takeUntil(stop)
  .subscribe(
    () => { console.log('next'); }, 
    () => { console.log('error'); }, 
    () => { console.log('complete'); }
  );

@Component({
    selector: 'my-form',
    templateUrl: './my-form.component.html',
    styleUrls: ['./my-form.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ FormBuilder ] // <-- THIS PART
})
export class MyFormComponent implements OnInit, OnDestroy {
}

以下是一个工作示例：

#2将FormBuilder添加到组件的提供程序列表中

这是我通常做的事。实际上，我通常将表单封装在使用FormBuilder的服务中，但效果相同。在该级别提供服务将在每次创建组件时销毁并重新创建服务。我开始这么做是因为我一直有一些奇怪的错误，这些错误是由可观察到的数据流引起的，这些数据流是在组件的生命周期内持续存在的价值变化造成的。当重新创建组件时，他们会重新订阅到

以下是一个例子：

const stop = new Subject();

// simulate ngOnDestroy
window.setTimeout(() => {
  stop.next();
  stop.complete();
}, 3500);

Observable
  .interval(1000)
  .takeUntil(stop)
  .subscribe(
    () => { console.log('next'); }, 
    () => { console.log('error'); }, 
    () => { console.log('complete'); }
  );

@Component({
    selector: 'my-form',
    templateUrl: './my-form.component.html',
    styleUrls: ['./my-form.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ FormBuilder ] // <-- THIS PART
})
export class MyFormComponent implements OnInit, OnDestroy {
}

@组件({
选择器：“我的表格”，
templateUrl:“./my form.component.html”，
样式URL:['./my-form.component.scss']，
changeDetection:ChangeDetectionStrategy.OnPush，
提供者：[表单生成器]//