跨多個組件實例的角度2全局變量

我在一個頁面上有兩個組件：Component1和Component2。每個內部都是Component3。很明顯，每個組件3都是它自己的組件實例。但是，我希望兩者之間有一個全局變量。我創建了一些數據的並排比較，並希望手風琴起作用，所以當我單擊以在一個Component 3上展開手風琴時，另一個也會打開。我一直在尋找幾個小時，無法找到解決方案。跨多個組件實例的角度2全局變量

我要的是，例如：

(click) = "changeGlobalVar()"

改變全局變量。然後，我想有

*ngIf="globalVar"

這樣一來，ngIf工程兩個子項目3，不管我點擊其中之一。

有人能幫我嗎？我一直在尋找這個小時的答案。

這裏是我的服務代碼看起來像，但似乎並不奏效：

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

@Injectable() 
export class DropDownService { 

    public _acDropDownToggle: boolean; 

    setValue(val) { 
    this._acDropDownToggle = val; 
    } 

    getValue() { 
    return this._acDropDownToggle; 
    } 

}

來源

2016-07-15 Chris Stanley

使用'service'並注入組件中。他們是單身人士，所以價值將是相同的各個組成部分。 – reptilicus

當我使用服務時，它似乎不是同一個變量。我會在我的服務中用我的代碼更新我的問題。 –

你可能在多個地方提供你的DropDownService，因此你得到了你的服務的多個實例（在Angular 2中，服務不一定是單身人士）。只嘗試將DropDownService放入Component1和Component2上方組件的'providers'數組中。然後每個Component3實例應該獲得對您的服務的相同/單個實例的引用。 –

因此，你只是一半的路，你只需要一些關於如何利用服務的說明。您創建的服務只能作爲「提供者」插入到您的主要組件中。所有子組件都將使用該服務作爲「依賴注入」，這意味着子組件將在它們的構造方法參數中請求服務。

例如您的主要部件看起來就像這樣

import {componentStateService} from './componentState.service' 
import {ComponentOne} from './component1' 
import {ComponentTwo} from './component2' 
@Component({ 
    selector: 'test-app', 
    template : `...`, 
    providers: [componentStateService],<---- 
    directives: [ComponentOne,ComponentTwo] 
}) 
export class AppComponent { 
    constructor(){} 
}

然後子組件（組件之一，在我的plunker例如組件式兩種。爲了您的代碼，你只有這適用於你的第三個組件），將通過其構造商注入服務。

import {componentStateService} from './componentState.service' 
@Component({ 
    selector: 'component-one', 
    template : `...` 
}) 
export class ComponentOne extends OnInit { 
    private _componentVisible:boolean; 
    constructor(private _componentStateService:componentStateService){<---- 
     this._componentVisible = true; 
    } 
}

這將確保只創建一個服務實例。

下一步是添加一個「可觀察的」爲您服務，然後「訂閱」可觀察你的孩子的組件。

這是一個plunker，它確切地表明瞭您在尋找什麼。您將需要使用RxJS模塊。如果您使用的是SystemJS，那麼該調度程序將向您展示如何添加此功能。如果您使用TypeScript編譯器將您的.ts轉換爲.js，則還需要通過npm安裝RxJS（在plunker示例中，SystemJS使用模塊進行轉儲）。

關於Angular 2 Observable的好教程可以在here找到。本教程充分利用了比我在重擊中使用的更多的功能，但這應該足以讓您開始。

來源

2016-07-16 02:29:15

非常感謝你！這plnkr真的幫助我全力以赴。 –

你在哪裏提供服務？

你真正想要做的是在app.component.ts中提供它。這樣，同一個實例可用於所有子組件。

你是否在提供這兩個組件？如果您在組件1和組件2中都提供它，您將得到不同的實例

來源

2016-07-16 01:52:50 domfx

由於要在組件3的兩個實例之間共享變量Ind DropDownService，實例化它的最佳位置應該位於頁面組件中。將兩個component3實例

假設你的組件樹的最低共同祖先是這樣的： -

   PageComponent 
      /  \ 
      /   \ 
    Component1   Component2 
     /     \ 
    /     \ 
    Component3    Component3

最好的地方，提供一個存儲中提供DropDownService將在PageComponent的組件裝飾。然後，您應該將其注入到Component3的構造函數中。如果您在Pagecomponent的任何子組件的提供者中指定服務，則會再次創建一個新實例。

來源

2016-07-16 02:19:42

嘗試僅在app.component.ts或main.ts中注入這些服務一次。

如果你在每個組件的提供者中注入它們，它將創建一個僅限於那些組件的新範圍，並且全局變量將無法按預期工作。

來源

2016-07-16 05:26:12

跨多個組件實例的角度2全局變量

回答

相關問題