Eine kurze Diskussion zum Abbestellen in Angular

Dieser Artikel führt hauptsächlich eine kurze Diskussion darüber ein, wann ein Abonnement in Angular gekündigt werden sollte. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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.

Szenario für die manuelle Freigabe von Ressourcen

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

Das Obige Die Lösung funktioniert auch. Gilt für andere Formularsteuerelemente.

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 „interval()“ 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();
 }
}

Ressourcen müssen nicht manuell freigegeben werden Szenarien

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, wird die asynchrone Pipeline zerstört führt automatisch Abo-Kündigungsvorgänge durch, um das Risiko von Speicherverlusten zu vermeiden.

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 nicht manuell abmelden können, wenn Sie den @HostListener-Dekorator verwenden und Ereignis-Listener hinzufügen. 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

Operatorsignatur

Code kopieren Der Code lautet wie folgt :

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

Operatorfunktion

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

Operator-Beispiel

// 每隔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 Empfehlung

Sie sollten uns abmelden (so wenig wie möglich) -Methode erfahren Sie mehr über Subject 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

Operatorsignatur

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

-Operatorfunktion

gibt den vom Quell-Observable ausgegebenen Wert aus, bis das Notifier-Observable einen Wert ausgibt.

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:

node.js veröffentlichen und abonnieren Muster Methoden

Detaillierte Erläuterung der Verwendung des JavaScript-Publish-Subscribe-Modus

PHP WeChat öffentliche Plattformentwicklung Abonnementereignisverarbeitung_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Abbestellen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!