如何在Angular中将道具孩子设置为父母？

Question

我在使用 Angular 的团队工作，我之前使用过 Vue，到目前为止我已经学习了 Angular 7 5 天，而我的团队仍在使用 Angular 4，我想知道如何在 child 中设置 prop给父母？我通常在Vue中在组件中使用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 是用@Output() 装饰的子级的EventEmitter 属性。

如果您想在这两个组件和可能的其他组件之间共享数据，您可以创建共享服务。对于您的情况，这可能有点矫枉过正。