Question

我正在研究角度5。我需要在子组件中显示父组件上的一个对象数组，如果该对象数组中的任何值被更改，我希望父组件的值也应更新。现在我的问题是 Angular提供了3种方法来进行分量求逆。

@Input @output 装饰器
@viewchild 装饰器
使用服务

哪个更高效？就我而言，哪种方法最好？或一般来说，父子数据共享？

Answer 1

一个组件（<comp1>）在另一个组件（<comp2>）的模板中使用。使用 @Input @Output
- 因为两个组件都将处于父子关系
- 简单且最好与子组件交换数据
第二个组件（<comp1>, <comp2>）内部使用了两个不同的组件（<comp3>）。使用服务（仅用于小型应用程序，不建议用于大型应用程序）
- 两个组件（comp1，comp2）都不直接相关
- 由于两个组件不在父子关系中，因此@Input @Output在这里不起作用
- 或者，您也可以对大型应用程序也使用ngrx / store库（状态管理）
我使用 @ViewChild 来主要观察DOM元素中的更改并以此为基础执行我的工作。

Answer 2

让我示范一下。

@Input()和@Output()通常用于在 parent 和 child 组件之间传递特定变量。

@Input()用于将变量从 parent 传递给 child ，而@Output()用于将变量从 child 传递>成为 parent 。
@ViewChild()用于控制 parent 组件内的 child 组件。

使用时；您可以将 child 组件作为 Object 捕获，因此可以调用其功能，编辑其变量等。
服务（如果您使用它传递变量）将像一个全局变量，使用此服务的任何组件都可以看到它，而不仅仅是parent和{{ 1}}组件。

从我的角度来看；您不应使用服务将数据从child传递到parent，反之亦然；如果您多次使用多个子组件，则会遇到很多问题。

Answer 3

使用服务方法来更新数据句柄，以下是代码

创建一个import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataSharingService { private dataSource = new BehaviorSubject<any>('null'); currentData = this.dataSource.asObservable(); private activeStateData = new BehaviorSubject<any>('null'); currentActive = this.activeStateData.asObservable(); constructor() { } changeData(data:any){ this.dataSource.next(data); } aciveState(state:string){ this.activeStateData.next(state); } }文件

constructor( private alertService: AlertService)
  add() {
    let yourSharingData = null;
    this.dataService.changeData(yourSharingData );
    this.router.navigate(["/path-to-your-child"]);
  }

来自父组件

this.dataService.currentData.subscribe(res => {
console.log(res);
})

来自子组件的订阅服务

$ ("p.click").click(function () {
target = $(this).nextAll("p.target").first() // following-->nextAll
});

Answer 4

如果您在考虑使用大型数据集的性能时询问效率，那么最好选择服务而不是“ @output”，因为它内部使用了EventEmitters，它在性能上很昂贵，并且更改检测也是如此。我希望这能回答您的问题。

Angular 5父子数据共享

4 个答案: