如何将父组件变量通知给其他组件？

我正在做应用程序中的国际化，父组件内部有很多组件。如何将父组件变量通知给其他组件？

在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

如何将父组件变量通知给其他组件？

回答

相关问题