應用程序組件的公共變量Angular2

在我的Angular2應用程序中，我有一個「目錄」和「購物車」，通過目錄組件+目錄服務和購物車組件+購物車服務在我的代碼中表示。應用程序組件的公共變量Angular2

我有我的目錄組件中的產品數組，我想從數組中添加項目到另一個（最初是空的）陣列是購物車陣列。

我的目錄組件代碼：

import { Component, OnInit } from '@angular/core'; 
import { CatalogService } from './catalog.service'; 
import { CartComponent } from '../cart/cart.component';//I want to use the "cart" array initialized there in the Cart Component 

@Component({ 
    selector: 'catalog', 
    templateUrl: './catalog.component.html', 
styleUrls: ['./catalog.component.scss'] 
}) 

export class CatalogComponent implements OnInit { 
    catalog: any; 
    image: any; 
    title: string; 
    description: string; 
    prod: any; 
    visible: boolean; 

constructor(public catalogService: CatalogService){ } 

ngOnInit(){ 

    this.catalogService.getCatalogItems().subscribe(
     (data) => this.catalog = data 
    ); 
} 

getPrev(){ 
    this.catalog.push(this.catalog[0]); 
    this.catalog.shift(); 
} 

getNext(){ 
    this.catalog.unshift(this.catalog[this.catalog.length-1]); 
    this.catalog.pop(); 
} 

togglePopup(prod){ 
    this.prod = prod; 
    this.visible = !this.visible; 
    this.image = prod.image; 
    this.title = prod.title; 
    this.description = prod.description; 
} 

    toCart(prod){ 
    this.cart.push(prod);//"cart" array of my Cart Component 
    } 

}

我的購物車組件：

import { Component, OnInit } from '@angular/core'; 
import { CartService } from './cart.service'; 

@Component({ 
    selector: 'cart', 
    templateUrl: './cart.component.html', 
    styleUrls: ['./cart.component.scss'] 
}) 

export class CartComponent implements OnInit { 

    constructor (private cartService: CartService, public cart: Cart[]){}//by "public cart: Cart[]" I make it available from anywhere in my app 

    ngOnInit(){ 
     this.cartService.getCartItems(); 
    } 
}

我的目錄服務：

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

import 'rxjs/add/operator/map'; 

@Injectable() 
export class CatalogService { 
    constructor(private http: Http){ } 

    getCatalogItems() { 
     return this.http.get('../catalog.json')//there are some items in the "catalog.json" 
     .map((res) => res.json()) 
    } 
}

我的購物車服務：

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

import 'rxjs/add/operator/map'; 

@Injectable() 
export class CartService { 
    constructor(private http: Http){ } 

    getCartItems() { 
     return this.http.get('../cart.json')//there are no items initially in the "cart.json", I want to add items from Catalog array to the initialized "cart : Cart[]" array 
     .map(
     (res) => res.json() 
    ); 
    } 
}

雖然我宣佈全球車變量（「公共車：車[]」中的車組件）和進口車組件到目錄組件，即車變量不存在有（在我的目錄組件），並且我無法將目錄中的商品添加到購物車中。

那麼，如何創建一個購物車陣列這將適用於整個應用程序？如果我添加/刪除不存在，我想要其他組件，我會使用該對象自動更新其實例的對象購物車。

來源

2017-02-04 Alexandr Belov

傳遞給構造函數的參數是實例值。您需要該類的一個實例才能訪問它們。導入在這裏根本沒有幫助。

將值移至服務並在要訪問該值的位置注入服務。

只提供一次服務（@NgModule() of AppComponent），那麼應用程序中的每個組件和服務都將獲得相同的服務實例注入。

參見https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

來源

2017-02-04 19:29:36

放置一個public，private，protected，或readonly修改器構造函數的參數是語法速記聲明具有相同的名稱和修改一個屬性，並將其分配給通過了該參數的值類實例化時的構造函數。

這些修飾符是一種創建實例成員的方法。它們不影響全球範圍，它們的影響實際上是在類實例級別範圍內的。

例如，下面的兩個類定義是完全等效

class A { 
    constructor(m: number) { 
    this.m = m; 
    } 
    readonly m: number; 
}

2。

class A { 
    constructor(readonly m: number) { } 
}

達到你需要做的是這樣

export class CartComponent { 

    constructor (private cartService: CartService, cart: Cart[]) { 
    window.cart = cart; // Make cart available from anywhere in my app. 
    } 
} 
declare global { 
    interface Window { 
    cart: Cart[]; 
    } 
}

但請不要這樣做全球影響！請勿使用全局變量！

您可以使用角度的服務，但也有存在，不論你使用的是什麼框架，更直接的選擇。

例如

應用程序/共享state.ts

export default { 
    cart: undefined, 
    // other shared stuff... 
};

應用程序/ cart.component.ts

import sharedState from 'app/shared-state'; 

export class CartComponent { 

    constructor (private cartService: CartService, public cart: Cart[]) { 
    sharedState.cart = cart; 
    } 
}

這仍然共享可變狀態和應應避免，但不會污染全局名稱空間。

岡特Zöchbauer的答案可能更接近你在找什麼，你似乎是寫一個角度應用程序，這將是常規的做法。

我想回答的具體問題，並澄清有關參數屬性的語法有什麼誤會，東西是不特定的角度。

來源

2017-02-05 11:28:49

應用程序組件的公共變量Angular2

回答

相關問題