Eğik EventEmitter birden çok kez denilen

oy
0

Bu gerçekten garip ve açıklamak zor. Ben kullanımı var EventEmitterbenim hizmetlerin birkaç içinde ve benim görünümlerde verileri değiştirmek için kullanıyoruz. Ben (linkleri yoluyla veya tarihin geri aracılığıyla) birden çok kez ateş gibi görünüyor değişim yolları ile bir sorunu vardı ve bu nedenle bu benim mantığı berbat ediyor.

Bu yüzden ben bunu yeniden olmadığını görmek için stackblitz üzerinde bir test yarattı. Ben basit bir hizmet yaptı:

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable()
export class ListService {
@Output() listChanged: EventEmitter<any[]> = new EventEmitter<any[]>()

  constructor() { }

  list() {
    this.listChanged.emit([]);
  }
}

ve sonra benim yollarının birinde, ben sadece bunu:

import { Component, OnInit } from '@angular/core';

import { ListService } from '../list.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  count: any[] = []

  constructor(
    private listService: ListService
  ) { }

  ngOnInit() {
    this.listService.listChanged.subscribe(() => {
      this.count.push('invoked');
      console.log('invoked');
      console.log('------');
    });
    this.listService.list();
  }
}

Ve o zaman bu gibi basit bir şablon oluşturdu:

<p>
  Invoke should only be called once
</p>

<ul>
  <li *ngFor=let item of count>{{ item }}</li>
</ul>

Eğer güzergah arasında gezinmek, bu (beklendiği gibi çalıştığını benziyor ngFor , sadece hiç bir öğe olmalıdır), ancak konsolunu açın ve bir göz varsa, her zaman geri bir görünümden gitmek göreceksiniz bir ekstra zaman patlar.

  • Yani, önce bir kez konsol çıktısını göreceksiniz ziyaret edin.
  • konsolu temizleyin ve görünümleri arasında geçiş ve konsol çıktısını iki defa göreceksiniz.
  • konsolu temizleyin ve görünümleri arasında geçiş ve konsol çıktı üretmesi üç kez göreceksiniz .....

Bu görünümler takas her zaman oluyor devam edecektir. bunu kendiniz görebilirsiniz İşte stackblitz bağlantıdır.

https://stackblitz.com/edit/angular-sthags

Herkes bu oluyor ve nasıl durdurulacağını neden bana söyleyebilir misiniz?

Oluştur 27/11/2018 saat 18:21
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
3

Eğer bileşen yok eder (her sizin Ürünler bileşeni başlatır yeni abonelikler oluşturarak bellek sızıntısı neden olur) abonelik öldürmediğin Bunun nedeni

Bir sınıf değişkeni abonelik atama kullanmak ngOnDestroy()abonelik öldürmek için kanca.

subsVar: Subscription;

ngOnInit() {
    this.subsVar = this.listService.listChanged.subscribe(() => {
      this.count.push('invoked');
      console.log('invoked');
      console.log('------');
    });
}

ngOnDestroy() {
   if (this.subsVar) {
      this.subsVar.unsubscribe()
    }
}

https://stackblitz.com/edit/angular-9rvxgv?file=src/app/products/products.component.ts

Cevap 27/11/2018 saat 18:34
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more