Maison >interface Web >js tutoriel >Une brève discussion sur la désinscription dans Angular
Cet article présente principalement une brève discussion sur le moment d'annuler un abonnement dans Angular. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
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.
Scénario de libération manuelle des ressources
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(); } }
Ce qui précède la solution fonctionne également. S'applique à d'autres contrôles de formulaire.
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() { // 手动执行取消订阅的操作 } }
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(); } }
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(); } }
Pas besoin de libérer manuellement la ressource scénarios
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 les opérations d’annulation d’abonnement pour éviter le risque de fuite 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 et ajoutez des écouteurs d'événements, nous ne pouvons pas vous désinscrire manuellement. 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 de minuterie, 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 vous.
Exemple d'opérateur
// 每隔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));
Recommandation finale
Vous devez appeler pour vous désabonner (le moins possible) méthode, vous pouvez en savoir plus sur le sujet dans l'article RxJS : Ne pas se 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>
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 :
node.js publier le modèle d'abonnement méthodes
Explication détaillée de l'utilisation du modèle de publication-abonnement JavaScript
Développement de la plateforme publique PHP WeChat Traitement des événements d'abonnement_Tutoriel PHP
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!