如何將父組件變量通知給其他組件？

我正在做應用程序中的國際化，父組件內部有很多組件。如何將父組件變量通知給其他組件？

在app.component.ts，我設置當前所選貨幣如下，

ngOnInit() {  
    this.selectedLanguage = "EN"; 
    this.selectedCurrency = "EUR"; 
    //also setting to local storage 
    localStorage.setItem('currency', this.selectedCurrency); 
}

還有另外一個子組件在那裏我必須使用selectedcurrency在管，所以我得到在selectedcurrency在如下

export class EveComponent implements OnInit { 
    selectedCurrency :string; 
    ngOnInit() { 
     this.selectedCurrency = localStorage.getItem("currency"); 
    } 
}

，但這似乎並不工作，當變化發生的母公司。和我的管如下，

<div class="price">{{123 | currConvert | currency:selectedCurrency:true:'3.2-2'}}</div>

現在，當我改變我的父頁面上selectedCurrency，我想，要在EveComponent應用也是如此。如何用angular2做到這一點？

來源

2017-02-17 Sajeetharan

1 - 如果您的孩子組件是您的appComponent的直接孩子，您應該可以在孩子中使用@Input。

父組件模板：

<child-cmp [selectedCurrency]="selectedCurrency"></child-cmp>

，然後將子組件

export class EveComponent implements OnInit { 
    @Input() selectedCurrency :string; 
}

沒有必要在孩子再使用您的localStorage服務中。

2-子組件不是父組件，在這種情況下，你可以創建一個eventEmitter的直接孩子：

裏面你localStorage的服務：

export class LocalStorageService{ 
    $currencyChanges = new EventEmitter<any>(); 

    public setItem(item){ 
     // what ever u where doing , plus : 
     this.$currencyChanges.emit(item); 
    } 
}

然後在孩子裏面，你已經得到了服務，所以你可以：

導出類EveComponent實現OnInit {

ngOnInit() { 
    localStorage.$currencyChanges.subscribe((changes)=>{ 
     this.selectedCurrency = changes; 

    }); 
}

來源

2017-02-17 08:15:16 Milad

LocalStorageService不是服務其組件 – Sajeetharan

我該如何修改？它保留一個錯誤，說$ currencyChanges無法找到 – Sajeetharan

你是什麼意思localStorage不是一項服務？那是什麼？你能分享它的代碼嗎？ – Milad

在ngOnInit()中修改模型通常不是一個好主意。 ngOnInit()被更改檢測調用，更改檢測期間的更改通常會導致類似「異常檢查後表達式更改」等異常。在構造函數中

constructor() { 
    this.selectedCurrency = localStorage.getItem("currency"); 
}

代碼也有一些缺點（如使用測試）：

這應該更好地工作。

另一種解決方法，因此

constructor(private cdRef:ChangeDetectorRef) {} 

ngOnInit() { 
    this.selectedCurrency = localStorage.getItem("currency"); 
    this.cdRef.detectChanges(); 
}

來源

2017-02-17 07:32:18

其不工作 – Sajeetharan

檢查'localStorage.getItem（...）'是否實際得到一個值。也許其他組件尚未能夠設置它。 –

它獲得相同的值，這是默認設置，我希望它設置值，當我改變下拉並設置在父頁 – Sajeetharan

根據您的問題是，它似乎爲標準Parent-> Child通信或sibling->sibling通信是如此。

我觀察，你是保存在本地存儲，這意味着你要使用「localStorage的」作爲sharedService的值[至少currency（和它的不可觀察）

你嘗試治療currencyselectedCurrency作爲child和parentCurrency的初始化輸入。 parentCurrency可以通過自己或任何其他兄弟進行初始化/更新。 這意味着您的家長應該擔任兄弟姐妹的調解人，就消息傳遞而言。

兒童

export class EveComponent implements OnInit { 
    @Input() 
    selectedCurrency :string; 
    ngOnInit() { 
     this.selectedCurrency = localStorage.getItem("currency"); 
    } 
}

父模板

<child [selectedCurrency ]="parentCurrency"></child>

家長

ngOnInit() {  
    this.selectedLanguage = "EN"; 
    this.parentCurrency = "EUR"; // this property can be changed/updated and expected to be observed. 
    //also setting to local storage 
    localStorage.setItem('currency', this.parentCurrency); 
}

A Github該問題的示例肯定有助於調試正在進行的操作。

來源

2017-02-17 08:08:34 Ankesh

它仍然不能正常工作 – Sajeetharan

@你可以在github上演示一個演示來重現你的情況嗎？如果沒有完整的故事很難知道發生了什麼。 – Ankesh

我想要做的實際上是實施國際化，我有下拉設置貨幣。當它在主頁上設置時，它應該應用於所有使用管道的子組件 – Sajeetharan

如何將父組件變量通知給其他組件？

回答

相關問題