如何以角度将对象数组从子组件传递到父组件

Question

我创建了两个组件并将其命名为父级和子级。我在 app.component.html 链接了这些组件。 现在我在子组件中有一个对象数组，我的目标是使用@Output 在父组件中显示这些对象数组。 我的预期输出是每个对象都应该在一个单独的 div 中。

如果我不清楚我的疑问，请发表评论。

这是 app.component.html

<div class="container">
  <div class="row">
    <div class="col-6">
      <app-parent></app-parent>
    </div>
    <div class="col-6">
      <app-child></app-child>
    </div>
  </div>
</div>

这是 app.component.css

There is no css in this

这是 childcomponent.html

<div class="childclass">
    <h1>This is Child</h1>
</div>

这是 childcomponent.css

.childclass {
    background-color: burlywood;
}

这是 childcomponent.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})


export class ChildComponent implements OnInit {
  employs = [
    {
      name: `Mark`,
      age: 27,
      jobProfile: 'React Developer'
    },
    {
      name: 'Williams',
      age: 29,
      jobProfile: 'Angular Developer'
    },
    {
      name: 'Tom',
      age: 32,
      jobProfile: 'Vuejs Developer'
    }
  ]

  @Output()
  outputFromChild: EventEmitter<any> = new EventEmitter<any>()
  constructor() { }

  ngOnInit() {
  }

}

这是 parentcomponent.html

<div class='parentclass'>
    <h1>This is Parent</h1>
</div>

这是父组件.css

.parentclass {
    background-color: aqua;
}

这个父组件.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

利用EventEmitter这样您应该能够从孩子到父母进行交流。

app.component.html

<div class="container">
  <div class="row">
    <div class="col-6">
      <app-parent [employees]="employeesFromChild"></app-parent>
    </div>
    <div class="col-6">
      <app-child (ouputFromChild)="getEmployees($event)"></app-child>
    </div>
  </div>
</div>

app.component.ts

employeesFromChild: any;
getEmployees(event){
  this.employeesFromChild = event; //here you will get the employees from child
}

parent.component.ts

@Input() employees: any;

ngOnInit(){
  console.log(this.employees);
}

child.component.ts

 employs = [
    {
      name: `Mark`,
      age: 27,
      jobProfile: 'React Developer'
    },
    {
      name: 'Williams',
      age: 29,
      jobProfile: 'Angular Developer'
    },
    {
      name: 'Tom',
      age: 32,
      jobProfile: 'Vuejs Developer'
    }
  ]

 @Output()
  outputFromChild: EventEmitter<any> = new EventEmitter<any>()

 ngOnInit() {
     this.ouputFromChild.emit(employs);
  }

Answer 2

我的目标是使用@Output 在父组件中显示这些对象数组

最好将服务与 @Output 一起使用，因为 parent component 和 child component 是兄弟姐妹。

Service.ts

export class ServiceName {
    private employeeData= new BehaviorSubject<any>();

    getEvent(): Observable<any> {
        return this.employeeData.asObservable();
    }

    setEvent(param: any): void {
        this.employeeData.next(param);
    }
  }

您需要遵循几个步骤来完成您的要求，

1. 将数据存储在 Service employeeData 对象中，完成后在 EventEmitter 的帮助下调用 Parent 类（这里是 AppComponent）。
2. 设置从应用组件到父组件（在您的情况下是父组件和子组件）的输入字段。
3. 输入字段更新后，调用 Service employeeData 对象以检索父组件中的数据。

点击此处了解更多关于data sharing between sibling components in Angular的信息

希望这对你有帮助.. :)