javascript - 访问父 View 属性的最佳方式(Ionic 2、Angular 2)

Question

我正在测试 Ionic 2 和 Angular 2，我对访问父 View 的属性有疑问。

例如，我有一个测试应用程序，其中我的 View 是一个项目列表，当我单击一个项目时，我会输入它们的详细信息。很简单，对吧？好吧，详细信息 View 具有编辑元素然后应用更改的功能。

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

• 一种是传递对象引用并对其进行编辑，这会将其编辑回列表中(我想这是非常理想的)
• 在典型的 navCtrl.pop() 之前，通过 navParam 将参数传递给函数“ionViewDidEnter()”，它会在您返回 View 时执行，并在那里进行过滤，这样您就可以执行您想要的任务.问题:它不起作用(可能是错误)。
• 问题来了:当删除元素时，这将不起作用，因为我必须将其从列表中删除，例如典型列表.splice(索引, 1);

我发现了两种不同的执行方法:您可以将列表的引用传递给新 View ，或者您可以从 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();
  }

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

  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;

    }
  }

虽然这工作得很好并且没有抛出任何错误，但我想我只是有点幸运，因为:如果你不在一个简单的 View 中，你怎么知道你想要访问的 View 的索引每个例子用两个 View 测试这样的项目？我想这种做事方式可能会出现很多错误。

但由于它的工作原理，而且它似乎比传递大量参数或将 localStorage 用作“全局”变量更优化，我暂时坚持使用它。

我想知道的是... 访问父 View 属性的最佳方式是什么？

Answer 1

您应该尽量避免访问父 View 。

在子级中使用 @Output() 并在父级中使用 (someEvent) 绑定(bind)，并通知父级它应该对模型采取的操作。

如果它们不是直接的父子(比如当 child 被路由器添加时)，则使用带有可观察对象的共享服务。