Javascript 如何在Angular 2中的组件之间共享阵列？

我想做一个待办事项列表，我有两个组件（稍后还有更多） 我将共享一组

链接

导航栏组件

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

---

PS：如果更容易，我接受其他解决方案。

组件必须是无状态的，所有状态都存储在服务中。

组件必须是无状态的，所有状态都存储在服务中。

在第26行，您应该执行以下操作：

this.tacheService.insert(name)

您的所有组件都需要访问相同的链接[]？在这种情况下，实现它的最干净的方法是在需要时直接从服务获取该值。因此，不要将链接存储为组件上的实例变量：

taches: Tache[] = [];

将该实例变量放在服务上。然后，要么直接从服务访问该变量（eh），要么在返回该变量的服务上实现一个函数（更好）

---

另一种选择是，如果出于某种原因您必须将Tache[]存储在组件中，则让Tache服务公开一个Tache[]订阅，并让所有组件订阅它。请参见。

第26行，您应该执行以下操作：

this.tacheService.insert(name)

您的所有组件都需要访问相同的链接[]？在这种情况下，实现它的最干净的方法是在需要时直接从服务获取该值。因此，不要将链接存储为组件上的实例变量：

taches: Tache[] = [];

将该实例变量放在服务上。然后，要么直接从服务访问该变量（eh），要么在返回该变量的服务上实现一个函数（更好）

---

另一种选择是，如果出于某种原因您必须将Tache[]存储在组件中，则让Tache服务公开一个Tache[]订阅，并让所有组件订阅它。参见。

添加

方法`
返回插入（TACH）的目的是什么不执行任何操作，因为
此.tacheService.create（name）.
不返回任何内容。我猜你的意思是
返回这个.tacheService.create（name）…
。我还没有读过你的代码。应该是
this.tacheService.insert（name）
。
add
方法`
返回insert（tache）的目的是什么不执行任何操作，因为
此.tacheService.create（name）.
不返回任何内容。我猜你的意思是
返回这个.tacheService.create（name）…
。除此之外，我还没有阅读您的代码。应该是
this.tacheService.insert（name）
。无状态是什么意思？无状态是什么意思？