访问父视图属性的最佳方式（Ionic 2、Angular 2）

Posted 2023-03-13

【中文标题】访问父视图属性的最佳方式（Ionic 2、Angular 2）

【英文标题】：Optimal way of accessing parent view property (Ionic 2, Angular 2)

【发布时间】：2017-02-12 05:15:24

【问题描述】：

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

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

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

一种是传递对象引用并对其进行编辑，然后将其编辑回列表中（我想这是非常理想的） 在典型的 navCtrl.pop() 之前，通过 navParam 将参数传递给函数“ionViewDidEnter()”，该函数会在您返回视图时执行，并在那里进行过滤，这样您就可以执行您想要的任务.问题：它不起作用（可能是一个错误）。 海怪来了：当

删除

元素时，这是行不通的，因为我必须

从列表中删除它

，例如，使用典型列表.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;

    
  

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

但由于它有效，而且它似乎比传递大量参数或使用 localStorage 作为“全局”变量更优化，我现在坚持这一点。

我想知道的是... 哪种方式是访问父视图属性的最佳方式？

【问题讨论】：

最好的方法是不要这样做。相反，您应该创建一个在组件之间共享数据并在需要时传递参数的服务。

【参考方案1】：

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

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

如果它们不是直接的父子节点（例如当路由器添加子节点时），请改用带有 observables 的共享服务。

【讨论】：

你能举个例子吗？我没有听说过@Output 装饰器，也不知道Ang2 中的共享服务如何。

angular.io/docs/ts/latest/cookbook/component-communication.html 涵盖了这两个主题。它们是 Angular2 的非常基本的构建块