У нас есть простой компонент с таким свойством ввода:
<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>