Question

我在应用程序中进行国际化，父组件中有许多组件。

在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做到这一点？

Answer 1

1 - 如果您的子组件是appComponent的直接子组件，则您应该能够在子组中使用@Input。

父组件模板：

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

然后在子组件

中

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

不再需要在孩子身上使用localStorage服务。

2- Child组件不是父组件的直接子组件，在这种情况下，您可以创建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;

     });
 }

Answer 2

在ngOnInit()中修改模型通常不是一个好主意。更改检测调用ngOnInit()，更改检测期间的更改通常会导致异常等问题＆＃34;表达式在检查后发生了变化＆＃34;。

这应该更好：

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

构造函数中的代码也有一些缺点（比如测试）。

因此，另一种解决方法是

 constructor(private cdRef:ChangeDetectorRef) {}

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

Answer 3

根据您的问题，似乎是标准Parent-> Child通信或sibling->sibling通信的情况。

我发现你将currency保存在本地存储中，这意味着你试图使用'localStorage'作为值的[共享服务] [至少为currency]（并且它不可观察）< / p>

您是否尝试将selectedCurrency视为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); }

该问题的Github样本肯定有助于调试最新情况。

如何通知父组件变量更改为另一个组件？

3 个答案: