2

Есть 3 компонента : родительский (P) и 2 дочерних (C1) и (C2) (С1 и С2 - оба дочерние компоненты для Р и они не вложенные ) Template для P выглядит примерно так

<c1-component></c1-component>
<c2-component></c2-component>

В с1 есть переменная score, которая должна быть передана в с2, где есть метод count_score () к ней будут добавляться или отниматься числа, а затем, обновленная переменная score должна быть передана обратно в с1 из с2, посколько метод count_score () будет вызываться несколько раз (соответственно, прибавлять значения или отнимать надо будет уже с обновленной переменной). Подскажите, пожалуйста, как можно решить проблему?

Насколько я поняла, можно через:

  1. Shared Service
  2. Template и EventEmittler (кажется, это лучший способ, я пыталась что-то сделать, как и остальные 2 способа, но не выходит)
  3. передать из с1 в родителя, а оттуда спустить в с2, потом из с2 в родителя и оттуда в с1
1
  • первый вариант самый предпочтительный, храни логику в сервисе. Второй вариант вполне сносный, но наверное будет не таким очевидным. Третий, лучше не думать не о таком)
    – Artsiom
    Commented 27 июл. 2017 в 7:19

1 ответ 1

2

Для коммуникации между не вложенными компонентами хорошо подходят Services.

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

Рассмотрим вот такую структуру проекта:

введите сюда описание изображения

Создаем Service - recipe.service.ts:

import { EventEmitter } from '@angular/core'; 
import { Recipe } from './recipe.model'; 

export class RecipeService {

  recipeSelected = new EventEmitter<Recipe>();

  private recipes: Recipe[] = [
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
    new Recipe('Another Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
  ];

  getRecipes(){
    return this.recipes.slice();
  }

}

Эта служба содержит какие-то данные, методы и для Вашего случая важно, что она содержит событие recipeSelected, которое посылает объект класса Recipe, - во всех компонентах, где будет доступна эта служба, будет доступно и это событие, в итоге его везде можно посылать и также везде можно принимать.

Теперь важно подключить эту службу на том уровне, на котором Вы хотите, чтобы она была доступна. Если хотите, чтобы она была доступна по всем компонентам, то подключите её в app.module.ts. В моем случае она подключена в recipe.component.ts и будет доступна на этом уровне. Подключение службы в секции providers.

recipe.component.ts:

import { Component, OnInit } from '@angular/core';

import { Recipe } from './recipe.model';
import { RecipeService } from './recipe.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  providers: [ RecipeService ]
})
export class RecipesComponent implements OnInit {
  selectedRecipe: Recipe;

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
    this.recipeService.recipeSelected.subscribe(
      (recipe: Recipe) => {
        this.selectedRecipe = recipe;
      }
    );
  }

}

Для того, чтобы служба была доступна для любого компонента в его конструкторе её нужно объявить. В этом компоненте Вы видите пример:

constructor(private recipeService: RecipeService) { } 

В этом же компоненте в методе ngOnInit() написан код как слушать событие, если какой-то компонент его послал:

this.recipeService.recipeSelected.subscribe(...);

Теперь остается посмотреть как посылать событие через службу. Допустим, будем это делать из компонента recipe-item.

recipe-item.component.html:

<a
  href="#"
  class="list-group-item clearfix"
  (click)="onSelected()">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <p class="list-group-item-text">{{ recipe.description }}</p>
  </div>
  <span class="pull-right">
        <img
          [src]="recipe.imagePath"
          alt="{{ recipe.name }}"
          class="img-responsive"
          style="max-height: 50px;">
      </span>
</a>

По клику в этом компоненте будет вызван метод onSelected(), в нем событие генерится.

recipe-item.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { Recipe } from '../../recipe.model';
import { RecipeService } from '../../recipe.service';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;

  constructor(private recipeService : RecipeService) { }

  ngOnInit() {
  }

  onSelected() {
    this.recipeService.recipeSelected.emit(this.recipe);
  }

}

В итоге, в данном примере в компоненте recipe-item генерится событие, и оно может быть передано в любой компонент, в котором подключена служба RecipeService. В нашем случае оно передаст данные в компонент recipe.

Более того, если объявить данную службу в app.module.ts, то её можно будет подключать в компонент shopping-list и передавать данные в него.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.