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

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

0 голосов
/ 26 июня 2018

Я работаю над проектом, который имеет в левой части экрана категории, и при нажатии на каждую категорию в середине экрана должны отображаться статьи / продукты, которые относятся к выбранной категории.

Я выделил категории слева очень просто, как это: 

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>

Как вы видите в моем шаблоне файла, код готов к зацикливанию этого списка, но я не знаю, как его получить, может кто-нибудь объяснить мне, как это сделать?

Спасибо Приветствия

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Существуют различные способы отправки данных из одного компонента в другой. Я бы предложил попробовать услугу 

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;
}

Таким образом, сервис просто помогает обмениваться данными между двумя компонентами. Вы в основном храните данные в службе, чтобы к ним могли обращаться более одного компонента.

0 голосов
/ 26 июня 2018

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

@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

Надеюсь, это поможет вам!

0 голосов
/ 26 июня 2018

вы можете использовать сервис 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 / раздаточный / модули / разделяемые-модули-di.html

...