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服务，在其中放置一些日期，然后将它们放置在所需的任何位置。在创建共享服务后创建一个共享模块，并将您的共享模块导入主模块和仪表板模块中

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

我希望它能对您有所帮助！

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

3 个答案: