访问父视图属性的最佳方式(Ionic 2,Angular 2)

时间:2016-10-04 06:28:30

标签: javascript angular ionic-framework ionic2

我正在测试Ionic 2和Angular 2,并且我对访问父视图的属性存有疑问。

例如,我有一个测试应用,其中我的视图是项目列表,当我点击一个项目时,我会输入他们的详细信息。很简单,对吧?好吧,详细信息视图有编辑元素的函数,然后应用更改。

为此,我使用三种不同的方式:

  • 一个是传递对象引用并进行编辑,然后在列表中对其进行编辑(我猜这是非常理想的)
  • 在典型的navCtrl.pop()之前,通过navParam将参数传递给函数" ionViewDidEnter()",当你回到视图时执行,并在那里过滤它,所以你可以执行您想要的任务。问题:它不起作用(可能它是一个错误)。
  • krakken来了:当删除元素时,这不会起作用,因为我有从列表中删除,例如,典型的list.splice(index,1);

我发现了两种不同的执行方法:你可以将新视图传递给列表的引用,也可以从NavController访问它,就像我在这里一样:

  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();
  }

这里我有另一个奇怪技术的例子,重用编辑视图来创建一个新元素:

  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;

    }
  }

虽然这很好用并且没有丢失任何错误,但我想我有点幸运,因为:你如何知道你想要访问的视图的索引,如果你&#39 ;在每个例子中,不是在这样的简单测试项目中有两个视图?我想这种做法可能会有很多错误。

但是因为它有效,并且它似乎比传递大量参数或使用localStorage作为&#34;全球&#34;更为理想。变量,我暂时坚持这一点。

我想知道的是...... 哪种方式最适合访问父视图属性?

1 个答案:

答案 0 :(得分:2)

您应该尽量避免访问父视图。

在子级中使用@Output() s,在父级中使用(someEvent)绑定,并通知父级应该对模型执行的操作。

如果他们不是直接的父子(就像路由器添加子项时那样),而是使用带有observable的共享服务。