Question

我正在使用两个组件SelectTag和主要组件SettingsComponent。 select组件是带有选择器的简单指令，但是我遇到的问题是从子组件更新父变量。

例如：我有一个ngModel绑定到选择器组件中的变量（name），但是如何从父组件（设置）访问它呢？

到目前为止，我一直在尝试使用Angular EventEmitter：

@Output() onNameChange: EventEmitter<string>;

...并通过

访问它

<select-tag (onNameChange)="name = $event">

有更好的做法吗？

Answer 1

您有一些选择可以在子组件和父组件之间共享数据。最好的方法可能是使用EventEmitter，就像您已经尝试过的那样，只需确保要更新时触发事件即可。例如：

export class ChildComponent {

  @Output() nameUpdate: EventEmitter<string> = new EventEmitter<string>();
  updateParent(name){
    this.nameUpdate.emit(name)
  }

}

child.component.html：

<input (input)="updateParent($event.target.value)">

现在使用此子选择器的父级可以收听nameUpdate事件：

<app-child (nameUpdate)="nameUpdate($event)">

您将在$event中获得新值。

您还可以考虑使用服务和DI跨组件或任何其他状态管理工具共享数据。但是，如果您的组件处于同级关系中，则最好使用Input和Output装饰器。

Answer 2

您可以创建一个集中式centralized.service.ts组件，以将数据分发到您的组件，通过这种方式，您可以将其集中化，并在应用程序增长时轻松控制数据流：

export class CentralizedService {
   private sharedData = {};

   getSharedData(){
      return this.sharedData
   }

   updateSharedData(data){
     //Statements 
   }
}

然后将服务注入到您的模块中，并在两个组件中都可以访问它

constructor(private centralizedService: CentralizedService){}

ngOnInit(){
 this.componentData = this.centralizedService.getSharedData();
}

//Create a method to update shared data 
updateSharedData(data) {
 this.centralizedService.updateSharedData(data);
}

如何在Angular中将子变量传递给父变量？

2 个答案: