访问父视图属性的最佳方式(Ionic 2, Angular 2)
Optimal way of accessing parent view property (Ionic 2, Angular 2)
我正在测试Ionic 2和Angular 2,我对访问父视图的属性有疑问。
每个例子,我有一个测试应用程序,其中我的视图是一个项目列表,当我点击一个项目,我输入他们的详细信息。很简单,是吧?detail视图有一些函数可以编辑元素,然后应用这些更改。
对此,我使用三种不同的方法:
- 一种是传递对象引用并编辑它,它将其编辑回列表(我想这是非常理想的)
- 在典型的navCtrl.pop()之前,通过navParam向函数"ionViewDidEnter()"传递一个参数,该函数在您返回视图时执行,并在那里过滤它,因此您可以执行所需的任务。问题:它不工作(可能是一个bug)。
- 问题来了:当删除元素时,这将不起作用,因为我有从列表中删除它,每个例子,典型的列表。拼接(指数(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作为"全局"变量更理想,我现在坚持这样做。
我想知道的是……哪种方式是访问父视图属性的最佳方式?您应该尽量避免访问父视图。
在子绑定中使用@Output()
s,在父绑定中使用(someEvent)
,并通知父绑定它应该对模型采取的操作。
如果它们不是直接的父/子节点(比如当子节点被路由器添加时),则使用带有可观察对象的共享服务。
相关文章:
- Ionic + Angular ui-sref not generating href
- Ionic Angular JS导航项未导航
- Ionic/Angular:如何在嵌套json中导航
- 有没有办法在Ionic/Angular/Cordova堆栈中找到以dp(而不是px)表示的屏幕大小
- Ionic Angular/为什么在控制器功能结束之前不调用服务
- 在承诺函数从 pouchdb 填充数据之前触发 Ionic/Angular $watch的问题
- 确保 Ionic Angular UI 在启动处理器密集型任务之前已重绘
- 如何使用带有 phonegap 的 Ionic/Angular JS 工厂
- 控制器中的$scope在视图中不可访问/数据绑定不工作(IONIC/ANGULAR)
- 删除Ionic/Angular JS中基于侧菜单的模板中的导航栏
- 来自JSON数据的Openlayer中心(Ionic&Angular)
- Ionic Angular JS$routeProvider加载离子列表获胜't滚动
- 在Ionic/Angular中向下滚动时隐藏子标题
- Ionic Angular Cordova $scope不会在Service更新时更新
- Ionic Angular JS cookie 不起作用
- Ionic Angular不能在Android设备上运行
- Ionic Angular js 隐藏的输入值未显示在另一个页面中
- Ionic / Angular -刷新应用简历上的文章
- Ionic / Angular JS -如何解析onclick中的{{value}}
- Ionic / Angular JS -使用地理定位后输入字段不能正确更新