angular中控制器之间的传值该怎么实现?

作者:机智的布鲁斯
链接:https://www.zhihu.com/question/34977234/answer/60731328
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

1、event
这里可以有两种方式,一种是$scope.$emit,然后通过监听$rootScope的事件获取参数;另一种是$rootScope.$broadcast,通过监听$scope的事件获取参数。
这两种方法在最新版本的Angular中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。

2、service
可以创建一个专用的事件Service,也可以按照业务逻辑切分,将数据存储在相应的Service中,因为已经有人提过了就不赘述了。
建立一个service来保存数据,并且设置相应getter/setter,具体如下:
每个controller依赖service, call service.setter(...)
统一的service.setter(...)在改完数据后可以$emit('data-updated')
每个controller里$on('data-updated', function(){ $scope.data = service.getData() })


3、$rootScope
这个方法可能会比较dirty一点,胜在方便,也就是把数据存在$rootScope中,这样各个子$scope都可以调用,不过需要注意一下生命周期

4、直接使用$scope.$nextSibling及类似的属性
类似的还有$scope.$parent。这个方法的缺点就更多了,官方不推荐使用任何$开头的属性,既增加了耦合,又需要处理异步的问题,而且scope的顺序也不是固定的。不推荐

另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了,除非特殊情况,请避免这类方式。


Angular ,有几种方法可以实现组件之间的数据传递: 1.使用 @Input() 装饰器:通过在父组件声明一个属性,并使用 @Input() 装饰器将其传递给子组件,子组件可以使用这个属性进行渲染或其他操作。 例如,在父组件定义一个名为 "parentData" 的属性,并将其传递给子组件: ``` <app-child [childData]="parentData"></app-child> ``` 然后,在子组件使用 @Input() 装饰器接收这个属性: ``` @Input() childData: any; ``` 2.使用 @Output() 装饰器:通过在子组件定义一个 EventEmitter 属性,并使用 @Output() 装饰器将其传递给父组件,子组件可以通过调用该属性的 emit() 方法来触发事件,父组件可以监听这个事件并进行相应的操作。 例如,在子组件定义一个名为 "childEvent" 的 EventEmitter 属性: ``` @Output() childEvent: EventEmitter<any> = new EventEmitter(); ``` 然后,在子组件触发该事件: ``` this.childEvent.emit(data); ``` 最后,在父组件监听该事件并进行相应的操作: ``` <app-child (childEvent)="onChildEvent($event)"></app-child> ``` ``` onChildEvent(data) { // 进行相应的操作 } ``` 3.使用服务:通过在一个服务定义公共的数据或方法,然后在需要访问这些数据或方法的组件注入该服务,可以实现组件之间的数据共享。 例如,在一个名为 "dataService" 的服务定义一个名为 "sharedData" 的公共属性: ``` @Injectable() export class DataService { sharedData: any; } ``` 然后,在需要访问该属性的组件注入这个服务并使用它: ``` constructor(private dataService: DataService) {} ngOnInit() { this.sharedData = this.dataService.sharedData; } ``` 这些是 Angular 实现组件之间数据传递的常用方法,开发者可以根据实际情况选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值