Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2017-12-12 11:05:29
Original
1590 Leute haben es durchsucht

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();
 }
}
Nach dem Login kopieren


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() {
  // 手动执行取消订阅的操作
 }
}
Nach dem Login kopieren


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();
 }
}
Nach dem Login kopieren


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();
 }
}
Nach dem Login kopieren


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();
 }
}
Nach dem Login kopieren


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;);
 }
}
Nach dem Login kopieren


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: &#39;async&#39;, pure: false})
export class AsyncPipe implements OnDestroy, PipeTransform {
 // ...
 constructor(private _ref: ChangeDetectorRef) {}

 ngOnDestroy(): void {
  if (this._subscription) {
   this._dispose();
  }
 }
}
Nach dem Login kopieren


@HostListener


export class TestDirective {
 @HostListener(&#39;click&#39;)
 onClick() {
  ....
 }
}
Nach dem Login kopieren


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(&#39;document&#39;, "click", event =>{...});

// unsubscribe
this.handler();
Nach dem Login kopieren


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(&#39;http://api.com&#39;).subscribe(console.log);
 }
}
Nach dem Login kopieren


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));
Nach dem Login kopieren


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(&#39;todos&#39;)
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
           
   this.posts = this.store.select(&#39;posts&#39;)
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
 }

 ngOnDestroy() {
  this.componetDestroyed.next();
  this.componetDestroyed.unsubscribe();
 }
}
Nach dem Login kopieren


takeUntil-Operator

Operator-Signatur


public takeUntil(notifier: Observable): Observable<T>
Nach dem Login kopieren


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, &#39;click&#39;);
var result = interval.takeUntil(clicks);

result.subscribe(x => console.log(x));
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage