2016-10-04 8 views
1

Ionic 2とAngular 2をテストしています。親ビューのプロパティにアクセスすることに疑念があります。親ビュープロパティへの最適なアクセス方法(Ionic 2、Angular 2)

例では、ビューがアイテムのリストであるテストアプリがあります。アイテムをクリックすると、そのアイテムの詳細が入力されます。かなり簡単ですね?さて、詳細ビューには要素を編集してから変更を適用する関数があります。このため

、私は3つの異なる方法を使用します。

  • 一つは、前
  • (私はこれはかなり最適であると思います)のリストに戻ってそれを編集した、オブジェクト参照を渡すと、それを編集することです典型的なnavCtrl.pop()はnavParamを介して関数 "ionViewDidEnter()"にパラメータを渡します。この関数は、ビューに戻ったときに実行され、そこにフィルタをかけるので、あなたが望むタスクを実行できます。問題:それは動作しません(恐らくバグです)。
  • ここkrakkenが来る:要素を削除するときに、私は典型的なlist.splice(インデックス、1)と、例ごとに、リストからそれを削除するを持っているので、これは、動作しません。

は、私はこれを実行する二つの異なる方法を見つけました:

remove(){ 
    let list = this.navCtrl._views[0].instance.list; 

    for(var i=0;i<list.length;i++){ 
     if(list[i].id === this.contact.id){ 
      list.splice(i,1); 
     } 
    } 
    this.navCtrl.pop(); 
    } 

:私はここに同じように、あなたがリストの参照新しいビューを渡すことができますか、あなたはからNavControllerからアクセスすることができますここで私は新しい要素を作成するための編集ビューを再利用して、この奇妙な技術の別の例を持っている:

editContact(obj){ 
    if(this.onEdit){ 
     this.onEdit = false; 
     this.editBtnTxt = "Edit contact"; 
     if(this.onCreate){ 
      this.navCtrl._views[0].instance.list.push(this.contact); 
      this.navCtrl.pop(); 
     } 
    }else{ 
     this.editBtnTxt = 'Apply changes'; 
     this.onEdit = true; 

    } 
    } 

これはかなりうまく動作し、エラーを投げされていないが、私はちょうどややラッキーなことだと思い、あなたはどうやって知っていますか?例の2つのビューでこのような単純なテストプロジェクトに参加していない場合、アクセスしたいビューのインデックス?私は、このやり方で多くの誤りがあるかもしれないと思います。

しかし、それはうまくいくので、たくさんのパラメータを渡すよりも最適であるように見えるか、localStorageを「グローバル」変数として使用すると、私は今これを固執しています。

私が知りたいことは... 親ビューのプロパティにアクセスするにはどの方法が最適ですか?

+1

これを行う最適な方法は、これを実行しないことです。代わりに、コンポーネント間でデータを共有し、プッシュにする必要がある場合はパラメータを渡すサービスを作成する必要があります。 – misha130

答えて

2

親ビューにアクセスしないようにしてください。

子の場合は@Output()、親の場合は(someEvent)のバインディングを使用して、モデルで実行する必要のある操作について親に通知します。

直接親子ではない場合(ルーターによって子が追加された場合など)は、代わりにオブザーバブルで共有サービスを使用します。

+0

これらの例を追加できますか? @Outputデコレータについて聞いたことがなく、共有サービスがどのようにAng2にあるのかわかりません。 – Zerok

+0

https://angular.io/docs/ts/latest/cookbook/component-communication.htmlは両方のトピックを扱います。彼らはAngular2の非常に基本的なビルディングブロックです –

関連する問題