Ausführliche Erklärung, wann das Abonnement in Angular gekündigt werden muss

Sie wissen vielleicht, dass Sie, wenn Sie ein Observable-Objekt abonnieren oder einen Ereignis-Listener einrichten, irgendwann einen Abmeldevorgang durchführen müssen, um den Speicher des Betriebssystems freizugeben. Andernfalls kann es bei Ihrer Anwendung zu Speicherverlusten kommen.

Als nächstes werfen wir einen Blick auf einige häufige Szenarien, in denen Abmeldevorgänge manuell im ngOnDestroy-Lebenszyklus-Hook durchgeführt werden müssen. Dieser Artikel führt hauptsächlich eine kurze Diskussion darüber ein, wann ein Abonnement in Angular gekündigt werden sollte. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ressourcenszenario für manuelle Freigabe

Formular

export class TestComponent {

 ngOnInit() {
  this.form = new FormGroup({...});
  // 监听表单值的变化
  this.valueChanges = this.form.valueChanges.subscribe(console.log);
  // 监听表单状态的变化              
  this.statusChanges = this.form.statusChanges.subscribe(console.log);
 }

 ngOnDestroy() {
  this.valueChanges.unsubscribe();
  this.statusChanges.unsubscribe();
 }
}

Die obige Lösung ist auch auf andere Formularsteuerelemente anwendbar.

Route

export class TestComponent {
 constructor(private route: ActivatedRoute, private router: Router) { }

 ngOnInit() {
  this.route.params.subscribe(console.log);
  this.route.queryParams.subscribe(console.log);
  this.route.fragment.subscribe(console.log);
  this.route.data.subscribe(console.log);
  this.route.url.subscribe(console.log);
  
  this.router.events.subscribe(console.log);
 }

 ngOnDestroy() {
  // 手动执行取消订阅的操作
 }
}

Renderer-Service

export class TestComponent {
 constructor(
  private renderer: Renderer2, 
  private element : ElementRef) { }

 ngOnInit() {
  this.click = this.renderer
    .listen(this.element.nativeElement, "click", handler);
 }

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

Unendliche Observablen

Wenn Sie den Operator „intervall()“ oder „fromEvent()“ verwenden, erstellen Sie ein unendliches Observable-Objekt. In diesem Fall müssen wir die Ressourcen manuell abbestellen und freigeben, wenn wir sie nicht mehr benötigen.

export class TestComponent {
 constructor(private element : ElementRef) { }

 interval: Subscription;
 click: Subscription;

 ngOnInit() {
  this.interval = Observable.interval(1000).subscribe(console.log);
  this.click = Observable.fromEvent(this.element.nativeElement, 'click')
              .subscribe(console.log);
 }

 ngOnDestroy() {
  this.interval.unsubscribe();
  this.click.unsubscribe();
 }
}

Redux Store

export class TestComponent {

 constructor(private store: Store) { }

 todos: Subscription;

 ngOnInit() {
   /**
   * select(key : string) {
   *  return this.map(state => state[key]).distinctUntilChanged();
   * }
   */
   this.todos = this.store.select('todos').subscribe(console.log); 
 }

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

Ressourcenszenarien müssen nicht manuell freigegeben werden

AsyncPipe

@Component({
 selector: 'test',
 template: `<todos [todos]="todos$ | async"></todos>`
})
export class TestComponent {
 constructor(private store: Store) { }
 
 ngOnInit() {
   this.todos$ = this.store.select(&#39;todos&#39;);
 }
}

Wenn die Komponente zerstört wird, führt die asynchrone Pipeline automatisch den Abmeldevorgang durch und vermeidet so das Risiko von Speicherlecks.

Angular AsyncPipe-Quellcode-Snippet

@Pipe({name: 'async', pure: false})
export class AsyncPipe implements OnDestroy, PipeTransform {
 // ...
 constructor(private _ref: ChangeDetectorRef) {}

 ngOnDestroy(): void {
  if (this._subscription) {
   this._dispose();
  }
 }
}

@HostListener

export class TestDirective {
 @HostListener('click')
 onClick() {
  ....
 }
}

Es ist zu beachten, dass wir uns beim Hinzufügen von Ereignis-Listenern nicht manuell abmelden können, wenn Sie den @HostListener-Dekorator verwenden. Wenn Sie die Ereignisüberwachung manuell entfernen müssen, können Sie die folgende Methode verwenden:

// subscribe
this.handler = this.renderer.listen('document', "click", event =>{...});

// unsubscribe
this.handler();

Finite Observable

Wenn Sie HTTP-Dienste oder beobachtbare Timer-Objekte verwenden, müssen Sie sich nicht manuell abmelden.

export class TestComponent {
 constructor(private http: Http) { }

 ngOnInit() {
  // 表示1s后发出值，然后就结束了
  Observable.timer(1000).subscribe(console.log);
  this.http.get('http://api.com').subscribe(console.log);
 }
}

Timer-Operator

Operator-Signatur

Code kopieren Der Code lautet wie folgt:

öffentlicher statischer Timer (initialDelay: Nummer | Datum, Zeitraum: Nummer, Scheduler: Scheduler): Beobachtbar

Operatorfunktion

Timer gibt ein Observable zurück, das eine unendliche, automatisch ansteigende Sequenz mit einem bestimmten Zeitintervall ausgibt. Dieses Intervall wird von ausgewählt Du. .

Betreiberbeispiele

// 每隔1秒发出自增的数字，3秒后开始发送
var numbers = Rx.Observable.timer(3000, 1000);
numbers.subscribe(x => console.log(x));

// 5秒后发出一个数字
var numbers = Rx.Observable.timer(5000);
numbers.subscribe(x => console.log(x));

Abschließende Beratung

Sie sollte die unsubscribe()-Methode so selten wie möglich aufrufen. Mehr über Subject erfahren Sie im Artikel RxJS: Don't Unsubscribe.

Spezifische Beispiele sind wie folgt:

export class TestComponent {
 constructor(private store: Store) { }

 private componetDestroyed: Subject = new Subject();
 todos: Subscription;
 posts: Subscription;

 ngOnInit() {
   this.todos = this.store.select('todos')
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
           
   this.posts = this.store.select('posts')
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
 }

 ngOnDestroy() {
  this.componetDestroyed.next();
  this.componetDestroyed.unsubscribe();
 }
}

takeUntil-Operator

Operator-Signatur

public takeUntil(notifier: Observable): Observable<T>

Operatoreffekt

Gibt den von der Quelle ausgegebenen Observable-Wert bis zum aus notifier Observable gibt Werte aus.

Operator-Beispiel

var interval = Rx.Observable.interval(1000);
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = interval.takeUntil(clicks);

result.subscribe(x => console.log(x));

Verwandte Empfehlungen:

Detaillierte Erläuterung der Formularvalidierung in AngularJS

Detaillierte Erläuterung der Verwendung benutzerdefinierter Anweisungen in AngularJS_AngularJS

Detaillierte Erläuterung der benutzerdefinierten Filterung in AngularJS Device_AngularJS

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wann das Abonnement in Angular gekündigt werden muss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!