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('todos');
}
}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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
