Question

我从父组件返回一个observable并将其传递给子组件。我在子组件中订阅它。

以下是步骤。

在父组件中，我在模板中运行for循环。在模板中，我正在调用一个返回可观察的函数。并将其传递给子组件。

在子组件中我订阅它，然后在子组件上的ngdestroy我取消订阅它。

问题在于，当循环中有多个项目时，apis会不断被调用并在infinte循环中运行。

请建议。

Answer 1

您可能绑定到视图中的函数。每次更改检测运行时都会调用它。将结果分配给字段并绑定到该字段

Answer 2

我觉得你们所关注的架构不能很好地扩展。

这是我的建议：

所以你有两个组成部分：

PostComponent ：此组件将呈现帖子 CommentsComponent ：此组件将在PostComponent的模板中使用。

现在假设这是你的帖子组件模板的样子：

<!--Some data to be displayed about the post-->
<comments postId="post.id"></comments>

现在在 comments.component.ts 文件中，您将拥有以下内容：

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

import { CommentsService } from 'path-to-comments-service';
import { Comment } from 'path-to-comment-model';

@Component({
  selector: 'app-comments',
  templateUrl: './comments.component.html',
  styleUrls: ['./comments.component.css']
})
export class AppComponent implements OnInit {
  @Input() postId;
  comments: Comment[];

  constructor(private commentsService: CommentsService) {}

  ngOnInit() {
    this.commentsService.getCommentsForPost(postId).subscribe(comments => this.comments = comments);
  }
}

在此之后，您可以在 comments.component.html

中使用这些评论

注意：这只是我根据信息提出的建议。你提供了问题。

返回angular2中的一个observable，用于在无限循环中运行的for循环

2 个答案: