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

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： componentOneData: 任意;

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

您可以使用具有一个实例的 Singleton 服务，在其中输入一些日期，然后在您需要的任何地方获取它们。 创建一个共享模块，然后创建一个 sharedService 并将您的共享模块导入您的主模块和仪表板模块中

您可以使用 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

希望对你有帮助！