如何将新值绑定到数组变量从一个组件到另一个组件以及第一个组件中的现有数据

Question

i has two components comp1 & comp2

comp1 has one array variable . i created constructor in comp2 for comp1 to access comp1 functions it is workiing correctly and the values are binding in same array variable which i binds.

i need to bind the value from comp2 along with existing datas in the array variable in comp1

Array variable in comp1 has some values already.

but my problem is when i binding the value from comp2 for the same variable the values are maintaing seperately not with existing datas in that array variable

how to bind the new values to comp1 variable along with existing datas

Answer 1

I think you may directly assign data into comp1 . Like this.

array1 = values;

Instead of that, do this way

array1.push(values);

It will add values in existing array.

And make sure you are passig data in correct way.

Child to Parent: Sharing Data via ViewChild

Answer 2

What you need is a Shared Service.

1) create data.service.ts (simple service)

2) in this service define variable as BehaviorSubject

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

3) add this service as provider in module that is common for two components (app.module.ts)

4) now you can set sared service variable in components like

this.service.changeMessage(newData);

and you can subsribe to currentMessage value to get value, like

 this.service.currentMessage.subscribe(serviceValue => this.componentMessage = serviceValue );

Variable value from service will be the same for all components.