在Angular 2中的多个组件中的每个位置访问值?

时间:2017-06-05 11:18:11

标签: angular typescript ionic2

我必须在每个组件中使用来自db的用户对象,因为我选择离子存储来存储用户,甚至我可以访问组件中的任何位置。但是在组件中使用ngOnChanges()时遇到了问题。在我的构造函数初始化之前触发了ngOnChanges,在我的构造函数中,我有一个从localStorage获取用户的逻辑。

在ngOnChanges()方法中我检查用户是否退出分配某个值。我的条件每次都失败,因为获取用户逻辑是在构造函数中定义的。

子组件

     @Component({
      selector: 'my-fav-icon',
      templateUrl:``<ion-icon name="ios-heart-outline"  *ngIf="IsLike" (click)="onAddToFavorite()"></ion-icon>
<ion-icon name="ios-heart" *ngIf="!IsLike" (click)="onAddToFavorite()"></ion-icon>
`,
       })
         import { Component,Input,OnChanges,DoCheck} from '@angular/core';
            import { Storage } from '@ionic/storage';

            export class ChildComponent implements OnChanges {
             constructor(public storage:Storage) {
             this.storage.get('authentication').then((userResp) => {
               this.user = userResp
                console.log('category-video.ts -->Name has been set'+JSON.stringify(userResp));   //printed second
              });

              }


          IsLike:String
            @Input() 
            singleItem : any;

            ngOnChanges(changes){
                console.log('on-ng-changes is called');//printed first
                if(this.user){ 
                  if(this.user.favorites.indexOf(changes.currentValue.videoId) == -1){
                      this.IsLike =true;  
                    }else{
                    this.IsLike =false;
                    }
                }else{
                    this.IsLike =true;
                }


        }

            }  

父组件

 @Component({
  selector: 'page-categories',
  templateUrl: 'categories.html',
})
 export class ParentComponent{

}

categories.html

<div *ngFor="let item of cats">
<h1>My parent class component</h1>
<ion-col text-right>
  <my-favorite-icon [singleItem]="item" ></my-favorite-icon>
 </ion-col>
</div>

2 个答案:

答案 0 :(得分:0)

从构造函数中取出服务调用并使用ngOnInit或ionViewDidLoad。无论如何你应该这样做,但我无法使用ngOnChanges来处理任何离子成分。

答案 1 :(得分:0)

使用为离子指定的lifecycle事件,例如ionViewDidEnterionViewWillEnter等,这样您就可以在构造函数之前或构造函数调用之后根据需要获取内容。

如果您选择这些生命周期事件而不是*ngOnChanges*会更好,这样您就可以获得用户凭据。

修改

同时查看ionChange,我之前没有使用过,所以请看一下。