Angular2 Обнаружение изменений бесконечный цикл

Question

У нас есть простой компонент с таким свойством ввода:

<app-example [exampleInput$]="exampleInputData$"></app-example>

Для компонента, в котором мы используем app-example, у нас есть:

get exampleInputData$(): any {
    var subject = new Subject<string>();
    console.log("Log1");

    this.exampleService.getAllData(this.id).subscribe(data => {
      console.log("Log2");
      subject.next(data);
    });

    return subject.asObservable();
  }

И exampleService - этопросто наблюдаемый как таковой:

public getAllData(id): Observable<ExampleObject[]> {
    return this.http.get(`${this.baseUrl}data/${id}`).map((response: Response) => {
      var data = <ExampleObject[]>response.json();
      return data;
    }).catch(this.handleError);
  }

Когда мы запустим это, он попадет в бесконечный цикл, если мы изменим changeDetection, чтобы он остановился, или если мы удалим вызов getAllData.Кто-нибудь имеет представление о том, почему это вызывает бесконечный цикл?

Ниже приведен пример компонента приложения и HTML-шаблон:

export class ExampleComponent implements OnDestroy {      
  private subscription: ISubscription;
  private parsedResponse : any;

  @Input() exampleInput$;

  getData(): void
  {    
    this.subscription = this.exampleInput$.subscribe((data) => {this.parsedResponse = data;},
      () => {
        // Here we download the data as CSV
      });
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

Шаблон:

<button class="btn btn-primary" (click)="getData()">
  Download As CSV
</button>

Answer 1

Я не знаю, как проходит остальная часть вашего кода, но я думаю, что вы можете вызывать exampleInputData $ в каждом рендере, вы должны сделать что-то вроде этого:

Class Component implements OnInit {
    constructor(exampleInputDataService: ExampleInputDataService) {
    }

    ngOnInit(): void {
        this.data = this.exampleInputDataService.getData();
    }
}

Answer 2

Вы связываете метод в HTML.Таким образом, при каждом обнаружении изменений метод будет вызываться.Вам нужно установить наблюдаемое как атрибут, а содержимое в exampleInputData $ () поместите его в ngOnInit

export AppComponent {

    subject = new Subject<string>();
    observable$ = subject.asObservable();
    id: number;

    ngOnInit() {
        // I expected you know how to get the id value
        this.exampleService.getAllData(this.id).subscribe(data => {
            this.subject.next(data);
        });
    }
}

И в HTML

<app-example [exampleInput$]="observable$"></app-example>