Question

我在使用Angular的团队中工作，我以前使用过Vue，到目前为止我已经学习了Angular 7达5天，而我的团队仍在使用Angular 4，我想知道如何在孩子中设置道具给父母？我通常在Vue中使用Prop在组件中，因此，我可以在其他组件上使用Prop并设置Prop的数据，但是在Angular中，我不知道如何使用它（以为到目前为止我已经学习了它，但仍不确定如何以正确的方式绑定），这可能吗？

我想在这个Angular组件中创建一个加载器组件，但是我想使其可重用，以在另一个组件上设置加载器的宽度和高度，如何在Angular中做到这一点？

假设我要获取数据，然后在显示加载程序时等待

像这样：

<div>
   <app-loader *ngIf="show == 'true'" [setupWidhtLoader]="is-That-Possible-to-Set-Up-Here?"> </app-loader>
   <h2> {{ data.full_name  }} </h2>
</div>

Answer 1

要通过事件将数据从子组件传递到父组件，请使用@Output()装饰器。有关更多详细信息，请参见the docs。一个示例如下所示：

父HTML组件：

<app-loader (dataChange)="handleDataChange($event)"></app-loader>

父TS组件：

public handleDataChange(event){
  //Do something here
}

子TS组件：

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

您还可以使用双向绑定在父组件和子组件之间来回传递数据。在一个位置更改该值时，它将在另一位置自动更改。语法如下：

<app-loader [(width)]="parentWidth"></app-loader>

其中parentWidth是父项的属性，而width是子项的属性，其装饰有@Input()，而widthChange是子项的EventEmitter属性用@Output()装饰的孩子。

如果要在这两个组件之间以及可能在其他组件之间共享数据，则可以创建共享服务。对于您的情况，这可能有点过大。

如何在Angular中将prop child设置为parent？

1 个答案: