如何在 angular 中将对象数组从子组件传递到父组件

Question

I created two components and named it as parent and child. And I linked these components at app.component.html. Now I have an array of objects in child component, My goal is to show those array of objects in parent component by using @Output. My Expected output is Each object should be in a separate div.

If I am not clear with my doubt please put a comment.

This is 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>

This is app.component.css

There is no css in this

This is childcomponent.html

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

This is childcomponent.css

.childclass {
    background-color: burlywood;
}

This is 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() {
  }

}

This is parentcomponent.html

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

This is parentcomponent.css

.parentclass {
    background-color: aqua;
}

This parentcomponent.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

Make use of EventEmitter such that you should be able to communicate from child to parent.

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

My goal is to show those array of objects in parent component by using @Output

Its' better to use a service along with @Output because parent component and child component are siblings to each other.

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);
    }
  }

There are few steps you need to follow to complete your requirement,

1. Store the data in Service employeeData object, once this done call the Parent class (here it is AppComponent) with help of EventEmitter.
2. Set up an input field from App Component to Parent Component(which are parent and child in your case).
3. Once the Input field gets updated then call Service employeeData object to retrive data in Parent Component.

Have a look here to know more about data sharing between sibling components in Angular

Hope this helps you.. :)