如何将数据从子组件传递到根组件

Question

我有一个标志，如果执行一些操作，其值会更改。如果标志更改，则需要将更改后的值从子组件传递到根组件。

由于应用程序组件是自举组件，是否有任何方法可以将数据从子级传递到根目录，以便我无需加载页面即可获取数据？

我尝试了@ViewChild以及共享数据服务。

Answer 1

您可以使用角度可观察的主题，当在子组件级别执行任何操作时，可以将标志值推送到主题。您可以在“根”组件中订阅该主题。每当对子组件中的主题进行任何更改时，Root组件都会获取主题值，并且您还可以在angular中使用输出事件发射器

Answer 2

要将数据从子组件传递到父组件，您可以：

1. 使用ViewChild() childComponent: ChildComponent;，在父组件上使用childComponent.flag
2. 创建一个output()并使用EventEmitter发出标志
3. 为其创建一个subject()和subscribe()

Answer 3

在子组件中使用EventEmitter并在父组件中订阅

Answer 4

如前所述，您可以使用@Output属性，该属性从组件向其父对象发出事件，也可以使用共享服务。

@输出方法

课程

export class FooComponent {
  @Output() fooEvent = new EventEmitter<fooType>();
}

模板

您可以直接在模板中触发

<button (click)="fooEvent.emit('fooType')">...

或如果需要在发出事件之前做点事情，请在类中调用方法：

<button (click)="doSomethingBefore()">...

在类中，方法调用事件

doSomethingBefore() {
  this.fooEvent.emit(fooType);
}

共享服务方法

创建一个服务，并在服务中创建一个属性来存储数据值，一个主题，该主题从您的数据中发出最新值，以及获取该主题的方法。

共享服务

export FooBarService {
  private data;
  private dataChanges$ = new BehaviorSubject<fooType>(this.data);

  get getData(): Observable<fooType> {
    return this.dataChanges$;
  }

  upadteData(data: fooType) {
    this.data = data;
    this.dataChanges$.next(this.data);
  }
}

在组件中注入服务

接收数据的组件

export BarComponent implements OnInit {
  fooData$: Observable<fooType>;

  constructor(private fooBarService: FooBarService) {}

  ngOnInit(): void {
    this.fooData$ = this.fooBarService.getData;
  }
}

流式传输模板中的数据，因此您无需担心订阅和退订

<ng-container *ngIf="fooData$ | async"></ng-container>

更新数据的组件

现在您只需要更新任何组件中的数据，BarComponent便会显示该数据

// FooComponent
export class FooComponent {
  constructor(private fooBarService: FooBarService) {}

  updateData() {
    this.fooBarService.updateData(// put your data);
  }
}

什么是最好的？

这取决于。如果您不需要与数据进行太多交互，我建议使用@Output方法，否则共享服务会更好，因为它可以缓存数据。

  

OBS：如果要处理大量输入/输出数据，也许是时候考虑一​​些应用程序状态管理了。

Answer 5

在子组件中使用EventEmitter。

https://angular.io/api/core/EventEmitter

子组件：

@Output() flagChanged: EventEmitter<any> = new EventEmitter();

change() {
  this.flagChanged.emit();
}

父组件模板：

<child (flagChanged)="onFlagChange($event)"></child>

父组件：

onFlagChange() {
   console.log('Child flag has changed!')
}