如何将列表从一个嵌套组件发送到另一个嵌套组件?角

Question

我正在处理屏幕左侧类别的项目，通过按屏幕中间的每个类别，应该显示属于所选类别的文章/产品。

我在左边的类别非常简单，如下所示：

category: Category[];
ngOnInit() {
this.category= this._activatedRoute.snapshot.data['category'];
}

在我的模板.html文件中，我只是显示了它们并附加了每个事件：

<div class="tab-content categories-tab-content">
<div class="tab-pane" id="food">
<ul>
<li *ngFor="let c of category;">
<button type="button" data-toggle="" data-target="" class="btn categories-btn" (click)="getArticlesByCategory(c.id)">
{{subgroup.title | uppercase}}
</button>
</li>
</ul>
</div>
</div>

如您所见getArticlesByCategory方法位于如下所示的位置：(click)="getArticlesByCategory(c.id)因此，当用户单击每个分类时，将调用此方法：

getArticlesByCategory(selectedCategoryId: string) {
this._articleService.getArticlesByCategory(selectedCategoryId).subscribe(articles => {
this.category= category;
});

文章被获取，我试过console.log，它们就在那里..

这是我应该显示文章的第二个组件：

import { Component, OnInit, Input } from '@angular/core';
import { Article } from '../../models/article';
@Component({
selector: 'app-main-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit {
// Here I've created `@Input` because I think it needs to receive this list of articles
@Input() category: Article[];
constructor() { }
ngOnInit() {
}
}

这是我的组件的模板文件，应该接收和显示文章：

<div *ngFor="let product of products ;" class="article-holder">
<div id="article1" class="article">
<p class="article-price">product.price</p>
<p class="article-title">product.title</p>
</div>
</div>

正如您在我的模板文件中看到的那样，代码已准备好循环该列表，但我不知道如何获取它，任何人都可以解释我如何做到这一点吗？

谢谢 干杯

Answer 1

有多种方法可以将数据从一个组件发送到另一个组件。我建议尝试一项服务

ng generate service article.service.ts

然后使用该服务在两者之间共享数据

它看起来像这样：

构成部分1： 组件一数据：任意;

constructor(private articleService: ArticleService) {}
ngOnInit() {
getData() {
const data = http.get....
this.articleService.data = data;
this.componentOneData = data;
}
}

构成部分2：

componentTwoData: any;
constructor(private articleService: ArticleService) {}
ngOnInit() {
this.data = this.articleService.data; // Now I can access the data
}

服务：

@Injectable()
export class ArticleService {
data: any;
}

因此，该服务只是帮助在两个组件之间共享数据。您基本上将数据存储在服务中，以便多个组件可以访问它。

Answer 2

您可以使用具有一个实例的单例服务，在其中输入一些日期并将它们放在您需要的任何位置。 创建一个共享模块，然后创建一个共享服务，并将该共享模块导入到主模块和仪表板模块中

您可以使用 ModuleWithProviders 和 forRoot 来提供单例服务

import { SharedService } ...
...
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [SharedService]
}
}}

您可以通过这种方式导入它：

imports: [
SharedModule.forRoot(),
],

参考

https://angular-2-training-book.rangle.io/handout/modules/shared-modules-di.html

Answer 3

传递如下服务可能是个好主意：

@Injectable()
export class CategoryService {
categoryEmitter: EventEmitter<any> = new EventEmitter();
// you can add function and data
}

将其导入到模块和组件中：

//Module
providers:[SearchService]
//component
constructor(private catService : CategoryService ){}

并呼吁改变=>

this.catService.categoryEmitter.emit(data);

并在您需要侦听更改的组件中订阅(中间组件(=>

this.catService.categoryEmitter.subscribe((data)=>{
// logic
});

请参阅：https://angular.io/tutorial/toh-pt4

希望对您有所帮助！