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

Question

Я хотел бы сделать список дел, у меня есть 2 компонента (и более позже), я хотел бы поделиться массивом Tache,

Компонент Навбар

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { Tache } from './tache';
import { TacheService } from './tache.service';
import { InMemoryDataService } from './en-memoire';
@Component({
  selector: 'navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavBarComponent {
  constructor(
    private tacheService: TacheService) {}

  add(name: string): void {
    name = name.trim();
    if (!name) {return;}
    this.tacheService.create(name)
      .then(tache => {
        return insert(tache);
      });
  }
}

TachesInit Компонент

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

import { Tache } from './tache';
import { TacheService } from './tache.service';
import { InMemoryDataService } from './en-memoire';

@Component({
  selector: 'tachesInit',
  templateUrl: './tachesInit.component.html',
  styleUrls: ['./tachesInit.component.css']
})
export class TachesInitComponent implements OnInit {

  tacheSelectionnee: Tache;
  constructor(
    private tacheService: TacheService) {}
  ngOnInit(): void {
    this.tacheService.getTaches()
      .then(taches => this.taches = taches);
  }
}

обслуживание

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Tache } from './tache';

@Injectable()
export class TacheService {
  private headers = new Headers({'Content-Type': 'application/json'});
  private tachesUrl = 'api/taches';  // URL to web api
  taches: Tache[] = [];

  tacheSelectionnee: Tache;

  constructor(private http: Http) {}
  getTaches(): Promise<Tache[]> {
    return this.http.get(this.tachesUrl)
      .toPromise()
      .then(response => {
        let taches = response.json().data as Tache[];
        console.log(taches);
        return taches;
      })
      .catch(this.handleError);
  }

  create(name: string): Promise<Tache> {
    return this.http
      .post(this.tachesUrl, JSON.stringify({name: name, stat: 0}), {headers: this.headers})
      .toPromise()
      .then(res => res.json().data as Tache)
      .catch(this.handleError);
  }

  insert(tache: Tache): void {
    this.taches.push(tache);
  }
}

Компонент TachesInit не закончен, я бы использовал функцию insert в обоих из них передать данные и сохранить их в taches Массив объявлен в сервисе (чтобы все компоненты могли получить доступ к данным) я получаю сообщение об ошибке:

src/app/navbar.component.ts(26,15): error TS2304: Cannot find name 'insert'

PS: я принимаю другие решения, если проще

Answer 1

В строке 26 вы должны сделать:

this.tacheService.insert(name)

Всем вашим компонентам нужен доступ к одному и тому же Tache[]? В этом случае самый простой способ реализовать это - получить это значение непосредственно из службы, когда это необходимо. Таким образом, вместо того, чтобы хранить taches как переменную экземпляра в компоненте:

taches: Tache[] = [];

Вместо этого поместите эту переменную экземпляра в сервис. Затем либо обращайтесь к этой переменной напрямую из службы (eh), либо реализуйте функцию в службе, которая ее возвращает (лучше).

Другой вариант, если по какой-то причине вам абсолютно необходимо хранить Tache [] в компонентах, это сделать так, чтобы служба tache предоставляла подписку Tache [] и чтобы все компоненты подписывались на нее. См. http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/.

Answer 2

Компонент должен быть без состояния, все состояние хранится в сервисе.