Vous savez peut-être que lorsque vous vous abonnez à un objet observable ou configurez un écouteur d'événements, à un moment donné, vous devez effectuer une opération de désabonnement pour libérer la mémoire du système d'exploitation. Sinon, votre application pourrait souffrir de fuites de mémoire.
Examinons ensuite quelques scénarios courants dans lesquels les opérations de désabonnement doivent être effectuées manuellement dans le hook de cycle de vie ngOnDestroy. Cet article présente principalement une brève discussion sur le moment où annuler un abonnement dans Angular. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Scénario de ressources de publication manuelle
Formulaire
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();
}
}
La solution ci-dessus est également applicable à d'autres contrôles de formulaire.
Itinéraire
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() {
// 手动执行取消订阅的操作
}
}Service de rendu
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();
}
}Observables infinis
Lorsque vous utilisez l'opérateur interval() ou fromEvent(), vous créez un objet observable infini. Dans ce cas, lorsque nous n’avons plus besoin de les utiliser, nous devons nous désabonner et libérer les ressources manuellement.
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();
}
}Boutique Redux
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();
}
}
Pas besoin de libérer manuellement les scénarios de ressources
AsyncPipe
@Component({
selector: 'test',
template: `<todos [todos]="todos$ | async"></todos>`
})
export class TestComponent {
constructor(private store: Store) { }
ngOnInit() {
this.todos$ = this.store.select('todos');
}
}Lorsque le composant est détruit, le pipeline asynchrone effectuera automatiquement l'opération de désabonnement, évitant ainsi les risques de fuites de mémoire.
Extrait de code source angulaire d'AsyncPipe
@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() {
....
}
}Il est à noter que si vous utilisez le décorateur @HostListener, nous ne pouvons pas vous désinscrire manuellement lors de l'ajout d'écouteurs d'événements. Si vous devez supprimer manuellement la surveillance des événements, vous pouvez utiliser la méthode suivante :
// subscribe
this.handler = this.renderer.listen('document', "click", event =>{...});
// unsubscribe
this.handler();Finite Observable
Lorsque vous utilisez des services HTTP ou des objets observables timer, vous n'avez pas besoin de vous désinscrire manuellement.
export class TestComponent {
constructor(private http: Http) { }
ngOnInit() {
// 表示1s后发出值，然后就结束了
Observable.timer(1000).subscribe(console.log);
this.http.get('http://api.com').subscribe(console.log);
}
}opérateur de minuterie
Signature de l'opérateur
Copier le code Le code est le suivant :
minuterie statique publique (initialDelay : numéro | Date, période : numéro, planificateur : Planificateur) : Observable
Fonction opérateur
timer renvoie un observable qui émet une séquence infinie d'auto-augmentation avec un certain intervalle de temps. Cet intervalle est choisi par. toi. .
Exemples d'opérateurs
// 每隔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));
Conseil final
Vous devrait appeler la méthode unsubscribe() le moins possible. Vous pouvez en savoir plus sur le sujet dans l'article RxJS : Ne pas vous désabonner.
Des exemples spécifiques sont les suivants :
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();
}
}opérateur takeUntil
Signature de l'opérateur
public takeUntil(notifier: Observable): Observable<T>
Effet opérateur
Émet la valeur émise par la source Observable jusqu'à ce que le notifier Observable émet des valeurs.
Exemple d'opérateur
var interval = Rx.Observable.interval(1000); var clicks = Rx.Observable.fromEvent(document, 'click'); var result = interval.takeUntil(clicks); result.subscribe(x => console.log(x));
Recommandations associées :
Explication détaillée de la validation du formulaire dans AngularJS
Explication détaillée de l'utilisation des instructions personnalisées dans AngularJS_AngularJS
Explication détaillée du filtrage personnalisé dans AngularJS Device_AngularJS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
