Question

我正在努力研究如何使用Angular来解决我的用例。

我有3个组件，一个HomeComponent，它包含一个TopicsFilter组件和一个ArticlesList组件。我会在用户点击新的过滤器选项时尝试更新文章列表。

我的主页成员：

export class HomeComponent implements OnInit {
    loading = true;
    topics: Observable<Topic[]>;
    articles: Observable<Article[]>;

    public constructor(
        private articleService: Service
    ) { }

    ngOnInit() {
        this.articles = this.articleService.getArticlesList().share()
        this.topics = this.articleService.getArticleTopicsList().share()

        Observable.forkJoin([
            this.articles, this.topics
        ]).subscribe(
            response => { },
            error => {
                console.log('An error occurred:', error);
            },
            () => {
                this.loading = false;
            });
    }
}

我的homecomponent html：

<app-loader [loading]="loading">
</app-loader>

<div class="internal-wrapper" *ngIf="!loading">
    <app-topic-filter [topics]="topics | async"></app-topic-filter>
    <app-article-list [articles]="articles | async"></app-article-list>
</div>

我的ArticleList组件：

export class ArticleListComponent {
    @Input() articles: Article[];
}

最后，我的TopicFilter组件：

export class TopicFilterComponent {
@Input() topics: Topic[] = [];

constructor() { }

select(topic: Topic) {
  this.topics.forEach( (element) => {
    element.active = false;
  });

  topic.active = true;

}

因此，当用户点击它时，我可以获得活动主题，但是如何让我的主组件以主题的id作为参数重新运行我的查询并更新列表？

Answer 1

你可以使用输出。

在您的TopicFilter.component中添加以下内容

@Output() filteredList = new EventEmitter<any>();

过滤时可以发出数据

this.filteredList.emit(items);

现在在您的homecomponent html

中

<div class="internal-wrapper" *ngIf="!loading">
    <app-topic-filter [topics]="topics | async" (filteredList)="getFilteredTopics($event)"></app-topic-filter>
    <app-article-list [articles]="articles | async"></app-article-list>
</div>

并在ArticleList.component

中

getFilteredTopics(data) {
  this.articles = data;
}

根据另一个孩子

1 个答案: