Как отправить список из одного вложенного компонента в другой вложенный компонент? угловатый

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

Это может быть хорошей идеей для передачи через сервис, как:

@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

Я надеюсь, что это может помочь вам!

Answer 3

Вы можете использовать сервис 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